Background image is niet meer zichtbaar op mijn website

[Iineke]

Op mijn website (linken mag niet, begrijp ik, dus maar geen link erbij) had ik een background image dat was opgenomen in het css-bestand. Dat werkte prima. Maar ik heb een tijdlang niets aan die website gedaan, en merkte toen ineens dat de background image niet meer te zien was, niet in firefox en niet in IE.

Heeft iemand een idee waar dat aan kan liggen?
In het ccs-bestand staat

body {
font-family: Tahoma, Geneva, sans-serif;
background: #666666;
margin-top: 20px;
padding-top: 20px;
text-align: center;
color: #003366;
background-color: #FFF;
background-image: url(images/VP-achtergrond.jpg);
margin-left: 5px;
margin-top: 0px;
margin-right: 5px;
font-size: 100%;

en deze jpg staat in de map images in de directory van de site.

Alvast mijn dank!

 

[Naarling]

Linken mag best hoor (tenzij je site iets illegaals bevat of direct met helpmij concurreert), waar heb je gelezen dat dat niet mag?

Aan het einde van je CSS mist een }, maar ik kan natuurlijk niet zien of je hier op het forum een foutje hebt gemaakt of op je site.

 

[Loeri]

background-color: #FFF; doe dat eens weg?

 

[csshunter]

Dat zal geen verschil maken.
Er staan nu 3 voorschriften voor de background-styles:

body {
    ...
    background: #666666;
    ...
    background-color: #FFF;
    background-image: url(images/VP-achtergrond.jpg);
    ...
}

1. De eerste met de zessen is een shorthand (verkorte) notatie voor alles aan background-eigenschappen. Er wordt hier verteld dat de background vrij donker grijs moet zijn.
2. Dan komt de tweede: de background-color. Die zegt dat de background-color wit moet zijn. Deze stijlregel staat verderop dan de eerste, en de laatste stijlregel wint altijd, dus de background is nu wit gemaakt.
3. Tenslotte de derde, die zegt dat er ook een background-image ingevoegd moet worden. Er wordt niet bij verteld dat de achtergrondafbeelding zich niet mag herhalen, dus de afbeelding herhaalt zich wel: zowel horizontaal als verticaal. En daarmee nemen al die background-images naast en onder elkaar het hele beeldscherm in beslag. Daardoor is van de witte background-color niets meer te zien!

Conclusie: de eerste twee zijn weliswaar overbodig en kunnen geschrapt worden, maar ze kunnen geen kwaad aanrichten. Het bg-img staat er het laatst in, en dat wint van de vorige twee opdrachten.

Behalve als het image op een of andere manier niet gevonden kan worden: dan wint de laatste opdracht vóór het bg-img. Dus het wordt een witte achtergrond als het img er niet is.

Nu kan er ook nog iets anders aan de hand zijn dan een niet gevonden image. Verderop in de html/css-combinatie kan een element staan dat de body overlapt (geheel of gedeeltelijk), en een eigen achtergrondkeur heeft opgekregen. Dan wint die kleur (waar de overlapping plaatsvindt), en is het background-image daar niet zichtbaar.

Dat kan je bv. controleren door de body even tijdelijk een contrastkleur te geven, bv.:

body {
    ...
    background: green url(images/VP-achtergrond.jpg);
    ...
    }

• Zie je dan géén groen en géén image, dan zit er kennelijk iets vóór de background van de body (dus ook voor het background-image van de body), en moet daar het foutje gezocht worden. Dat kan dan aan van alles liggen (ook een tikfoutje ergens).
• Zie je wel groen, dan zit er niets in de weg, en is er toch iets mis met het vinden van het background-image zelf.

Maar om meer te kunnen zeggen is inderdaad een linkje naar de site/pagina nodig.

Met vriendelijke groet,
CSShunter

 

[Iineke]

Hartelijk dank voor jullie reacties. Daar kreeg ik blijkbaar geen mailtjes van, vandaar dat ik niet eerder heb gereageerd.

De link naar mijn site is: www.vertalersplatform.nl
Er hoort een wat grijzige gevlekte achtergrond zichtbaar te zijn, maar er is alleen een witte achtergrond zichtbaar.

- Die } stond wel in de css, ik was alleen vergeten de laatste regel te kopiëren.
- Ik dacht inderdaad ook al te weten dat alleen de laatste background-opdracht geldt, bovendien heb ik daar niets aan veranderd, en eerst was die achtergrond wel te zien.
- Die laatste uitgebreide reactie snap ik niet helemaal... moet ik dan die FFF in iets als 003366 veranderen? Dat heb ik geprobeerd, maar dat verandert niets: de achtergrond blijft gewoon wit.
De jpg staat zowel in de hoofdmap van deze site als in de map images.

Dit is de hele code van de css:

@charset "utf-8";
/* CSS Document */


body {
font-family: Tahoma, Geneva, sans-serif;
background: #666666;
margin-top: 20px;
padding-top: 20px;
text-align: center;
color: #003366;
background-color: #FFF;
background-image: url(images/VP-achtergrond.jpg);
margin-left: 5px;
margin-top: 0px;
margin-right: 5px;
font-size: 100%;
}
div#filler {
height:20px;
}

.twoColLiqLtHdr #container {
width: 62em;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
background-color: #FFFFFF;
background-image: url(images/VP-achtergrond.jpg);
}

.twoColLiqLtHdr #header {
background: #DDDDDD;
padding: 0 10px;
}

.twoColLiqLtHdr #sidebar1 {
float: left;
width: 12em;
background: #EBEBEB;
padding: 2px 0;
height: 550px;
}
.twoColLiqLtHdr #menubar {
margin-left: 150px;
background-color:#ddd;
color:#fff;
font-size:90%;
font-weight:bold;
height: 20px;
}
.twoColLiqLtHdr #menubar a{
background:inherit;
color:#003366;
display: block;
text-decoration:none;
padding:2px 6px;
background-color: #ddd;
width: 7em;
text-align: center;

}
.twoColLiqLtHdr #menubar a:hover{
background-color:#C0C0C0;
color:#fff;
}
.twoColLiqLtHdr #menubar ul{
list-style-type:none;
padding:0;
color: #FFFFFF;
text-align: center;
text-align: -moz-center;
}
.twoColLiqLtHdr #menubar li {
background-color:#483d8b;
color:#FFFFFF;
float:left;
text-transform: capitalize;
text-align: justify;
}
.twoColLiqLtHdr #menubar ul li ul{
display:none;
}
.twoColLiqLtHdr #menubar ul li ul li{
float:none;
}
.twoColLiqLtHdr #menubar ul li:hover ul{
display: block;
}
.twoColLiqLtHdr #menuLi{
background-color:#ddd;
/*font-size:80%;*/
font-weight:bold;
color:#fff;
}
.twoColLiqLtHdr #menuLi ul{
margin: 0;
padding: 0;
width: 7em;
list-style-type: none;
position: absolute;
display: block;
}
.twoColLiqLtHdr #menuLi a{
color:#003366;
display: block;
text-decoration:none;
padding:3px 3px;
margin:3px;
background-color: #ddd;
width:140px;
text-align: left;
}
.twoColLiqLtHdr #menuLi a:hover{
background-color:#C0C0C0;
color:#fff;
}
.twoColLiqLtHdr #menuLi ul li ul{
background-color:#ddd;
text-align: center;
left:6em;
position:absolute;
top:-20px;
/*visibility:hidden;*/
display: none;
width:12em;
}
.twoColLiqLtHdr #menuLi ul li:hover ul{
/*visibility:visible;*/
display: block;
background-color: #c0c0c0;
}
.twoColLiqLtHdr #menuLi ul li ul li ul{
background-color: #0f0;
text-align: center;
color: red;
left: 6em;
position: absolute;
visibility: hidden;
width: 12em;
top: 20px;
}
.twoColLiqLtHdr #menuLi ul li ul li:hover ul{
visibility:visible;
background-color: #c0c0c0;
}
.twoColLiqLtHdr #menuLi h4{
font-size: large;
color: #003366;
padding: 5px 6px 5px 6px;
padding: 0;
width: 12em;
}
.twoColLiqLtHdr #header h1 {
margin: 0;
padding: 10px 0;
}

.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
}

.twoColLiqLtHdr #mainContent {
margin-left: 13em;
padding-left: 5px;
padding-right: 10px;
height: 1050px;
overflow: auto;
}
.twoColLiqLtHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.twoColLiqLtHdr #footer p {
margin: 0;
padding: 10px 0;
}

.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
body,td,th {
font-size: small;
color: #003366;
}
a:link {
color: #003;
}
a:visited {
color: #036;
}
a:hover {
color: #06F;
}
a:active {
color: #003366;
background-color: #C0C0C0;
}
h1 {
font-size: 400%;
color: #003366;
}
h2 {
font-size: 115%;
color: #003366;
}
h3 {
font-size: 90%;
color: #003366;
}
h4 {
font-size: 80%;
color: #003366;
}
.stijl1 {
font-size: x-large;
font-weight: bold;
background-color: #000042;
}
.stijl2 {
color: #3366CC;
}
.stijl3 {
font-size: xx-large
}
.stijl4 {
color: #002142
}

 

[Iineke]

Aanvulling:
Als ik
background-image: url(images/VP-achtergrond.jpg);
verander in
background-image: green url(images/VP-achtergrond.jpg);

dan wordt de rand buiten het tekstgebied (wat dus alleen bij grotere schermen zichtbaar is, vermoed ik) een andere kleur (nl. background-color: #003366; uit de regel ervoor)
Het heeft dus geen invloed op het niet zichtbaar zijn van de wat grijzige achtergrond.

 

[csshunter]

Hoi Iineke,
Nee maar: de achtergrondafbeelding is er gewoon wel!
Hij is alleen bijna wit: van het grijs is erg weinig te zien:

VP-achtergrond.jpg​

Er is erg weinig verschil tussen de lichtste en de donkerste kleur:

lichtste tint | donkerste tint​

Bovendien bestaat het grijs uit hele kleine vlekjes met ook overloop-tinten naar de lichte kleur, dan zie je er helemaal weinig van:

lichtste tint | overloop | donkerste tint​

En tenslotte vindt er ook nog "overstraling" plaats: door de grijze eilandjes in een knallend lichte omgeving te zetten, kan het oog het verschil niet goed zien: het grijs lijkt witter.
Zoals hier op de linkerhelft overstraling van de bolletjes plaatsvindt; die op de rechterhelft zijn precies zo groot en met dezelfde grijskleur:

Conclusie:
Het hangt denk ik erg van het beeldscherm af, of je iets anders dan wit of heel licht crème waarneemt (en van monitor-instellingen als contrast en helderheid; en al of niet opvallend licht / daglicht / kunstlicht, enz.). En ook van het contrastvermogen van de bezoeker!

Zet er maar eens tijdelijk een ander img voor in de plaats, met meer tekening er in, of een kleurtje: dat is dan wel zichtbaar.

Met vriendelijke groet,
CSShunter
___________
PS: Met de mogelijkheid van dit verschijnsel had ik hierboven nog geen rekening gehouden!

 

[Iineke]

Grrrrrrrrrrrrrrrrrrrrrrrrrrr

;-)

Mijn beeldscherm staat dus veel te licht ingesteld, waardoor ik die achtergrond niet zie.
Hoe simpel kan het zijn?
Ik snapte er al niets van, had alles al een paar keer nagekeken.

Ik wilde deze site als basis gebruiken voor een nieuwe site, maar omdat ik die achtergrond niet in orde kreeg, heb ik dat niet gedaan.

Grrrrrrrrrrrrrrrrrrr

Mijn dank is groot!

 

[csshunter]

Contrast op de site

Tja, beeldschermen dat is me wat.

Ik heb mijn monitor bewust wat gedempt in helderheid/contrast, zodat ik ávonds zonder pijn in mijn ogen naar websites kan kijken die puur zwarte letters op knalwitte achtergrond hebben.

• Je ziet vaak dat websites dit maximale contrast proberen te verzachten door de letters wat grijzer te maken.

• Maar dat is eigenlijk precies verkeerd om! Het is komt de leesbaarheid ten goede om juist de letters helemaal zwart te laten, en de achtergond heel licht in te kleuren (grijs of andere tint). Dit geldt men name voor mensen met een verminderd gezichtsvermogen.
• Meer hierover bv. hier: contrastrebellion.com, en hier: Colour Choices on Web Pages: Contrast vs Readability

- Het eerste wat ik deed, was kijken of het image op de aangegeven locatie bij jou op de server stond. Ja - maar wat ik toen zag, was een wit vlakje zonder enige tekening er in.
Zou de afbeelding per ongeluk helemaal wit gemaakt zijn?
Fluks gedownload, en geopend in een tekenprogramma. Ik zag nog niks anders dan wit. Vergroten! Ja, bij 500% vergroten zag ik dat er grijze wolkjes in zaten:

=======

Mijn beeldscherm staat dus veel te licht ingesteld, waardoor ik die achtergrond niet zie.

Maar ik gok dat zo'n 90% van de bezoekers een ander beeldscherm hebben resp. andere instellingen hebben dan wat je nu zelf aan verbeterde instelling hebt gemaakt...
Daar komt bij: ook al is een monitor goed van kwaliteit (verschillen mogelijk!) en goed geijkt, dan blijven er ongehoord grote verschillen voor de bezoekers vanwege een verschillen in contrastvermogen. Dan gaat het niet eens om mensen die een oogafwijking o.i.d. hebben, maar bv. alleen al puur om de leeftijd.

• Ruwweg genomen hebben ongeveer 40% (!) van de surfers een contrastvermogen dat maar 1/3 is van het contrastvermogen van iemand van 20. Zie hier het verschil in contrastwaarneming (schrik niet!).

Om voor de gemiddelde bezoeker èn allerlei varianten van beeldschermen (en beeldscherminstellingen en lichtsituaties) een tekst goed leesbaar te maken, heeft w3c (in de WCAG - Web Content Accessiblity Guidelines) een minimale contrastverhouding vastgesteld.
Dat is de verhouding: 7:1 (voor grote letters 5:1).

Laten we de Colour Contrast Analyser los op de afbeelding, dan blijkt:

• De lichtste en de donkerste tint hebben een contrastverhouding van 1,1 : 1, dwz minder dan 1/4 van wat nodig is.
• Er is ook een drempelwaarde voor het helderheidsverschil: Brightness difference: 9. - Not sufficient, the threshold is 125.
• Er is ook een drempelwaarde voor het kleurverschil: Colour difference: 27. - Not sufficient, the threshold is 500.

Conclusie
Het gros van de bezoekers zal een ongenuanceerd witte achtergrond zien. :shocked:

Opties

1. Het zo laten zoals het is: het gaat hier om een background-img ter illustratie, en is niet van levensbelang voor het lezen van de inhoud van de site.
2. De afbeelding voor naast de pagina wat donkerder maken en met wat meer contrastverschil, en de oude afbeelding handhaven voor het binnenwerk.

De afbeelding voor ernaast kan bv. zoiets worden: VP-achtergrond-nw.png
Daarmee kan de site er als volgt uit komen te zien: screenshot.

IK zou voor optie 2 gaan: voor meer mensen te zien, en de aandacht wordt door de donkerder buitenkant naar het midden van de pagina gezogen.
En daar staat de tekst die men moet lezen!

• Verder leesvoer: mini-artikel "Kleuren in websites ... ook voor kleurenblinden!" in een ander topic op het forum.

Met vriendelijke groet,
CSShunter

 

[Iineke]

Wow! Dank je wel voor je analyse en adviezen!
Is het dan eigenlijk niet beter om die nieuwe meer contrastrijke achtergrond voor de hele site te gebruiken?

 

[csshunter]

Hoi Iineke,
Ja, zou ik zeker doen. Ik zou meteen de gelegenheid aangrijpen om er wat meer kleur in te brengen, want de site is nu wel heel erg plat, grijs en onuitdagend:

Omdat het bij vertalen om teksten gaat, zat ik te denken aan een background met onleesbare mini-tekstkolommetjes, zoiets als dit:

lorem-bg.png​

Daarmee kan de aanblik van de site iets worden als dit:

( hier screenshot op ware grootte bij resolutie 1280*1024px )​

Dat vrolijkt het wat op.

Met vriendelijke groet,
CSShunter