achtergrondfoto meer ingezoomed bij andere bezoeker?

[evertVB]

In mijn stylesheet staat het volgende:

body{
   text-align: center;
   margin: 0 auto;
   background-image: url(background\paddenstoel.jpg);
   background-position: top center;
   background-repeat: no-repeat;}

De bedoeling is dat de afbeelding 'paddenstoel.jpg' als background wordt ingesteld van mijn pagina.
Maar nu blijkt dat bij een andere bezoeker van mijn website de foto anders wordt getoond, nl. hij lijkt dan meer ingezoomed.
Hoe komt dit en wat kan ik hieraan doen?

(Die andere gebruiker heeft IE8, ikzelf IE7 maar dit zal het toch niet zijn?)

 

[silkcom]

Dit is afhankelijk van de schermresolutie van de gebruiker.
Je afbeelding geef je namelijk geen dimensies mee.

 

[Goeroeboeroe]

Een achtergrond-afbeelding heeft zelf geen afmeting, hij vult gewoon de achtergrond van waar hij in staat. In dit geval de body.
Normaal genomen wordt 'n te kleine achtergrond-afbeelding herhaald tot hij de hele achtergrond vult, maar hier niet, omdat je no-repeat hebt meegegeven. Bij 'n groter venster vult hij dus minder van de achtergrond op.

Dit is moelijk op te lossen. 'n Achtergrond-afbeelding die elk scherm kan vullen is al snel veel te groot in omvang, waardoor het laden te lang duurt.
Wat vaak wordt gedaan is de afbeelding centreren met center en dat combineren met 'n achtergrondkleur.
'n Andere mogelijkheid is 'n zogenaamde 'tile': een kleine afbeelding die zo is gemaakt, dat hij herhaald kan worden zonder dat je dat ziet.

 

[evertVB]

Normaal genomen wordt 'n te kleine achtergrond-afbeelding herhaald tot hij de hele achtergrond vult, maar hier niet, omdat je no-repeat hebt meegegeven.

Was in mijn geval geen optie, de foto leende zich hier niet voor en je zag duidelijk meerdere 'instanties' naast elkaar liggen.

Wat vaak wordt gedaan is de afbeelding centreren met center en dat combineren met 'n achtergrondkleur.

Dat is hoe ik het intussen heb opgelost.

Bedankt voor het meedenken!

 

[csshunter]

Hoi evertVB,
Nog twee alternatieven:

1. met CSS aandrijfmechaniek
De achtergrond-afbeelding kan als een "pseudo-achtergrond" (= voorgrond-figuur, maar in een aparte laag in de html/css) opgenomen worden. Als voorgrond-img is de css weer wel in procenten van breedte en/of hoogte in te stellen, wat automatische aanpassing aan de resolutie mogelijk maakt.
Nadeel: werkt alleen lekker bij een achtergrond-img dat niet gestoken scherp hoeft te zijn. De vergroting/verkleining wordt hier nl. door de browser verzorgd, en browsers doen dat kwalitatief niet zo goed (als een tekenprogramma). Verder is het uitkijken geblazen bij de hoogte van het plaatje, als dat echt beeldvullend moet zijn; er zouden delen afgesneden kunnen worden (maar hoe erg dat is, is van het plaatje afhankelijk).

• Een voorbeeld met "self adapting full screen background image" #body-background.

2. met Javascript aandrijfmechaniek
Je zou er ook een "resolutie-sniffer" van javascript op los kunnen laten. Deze gaat dan bij de bezoeker na, op welke resolutie zijn/haar beeldscherm staat, en kan dan een daarop afgestemde achtergrond-figuur leveren.
Nadeel: werkt niet als javascript uitgeschakeld staat. Eveneens problemen mogelijk bij hoogte/breedte verhouding.

Met vriendelijke groet,
CSShunter

 

[Goeroeboeroe]

@csshunter: Ha, weer boven water. Altijd leuk jouw aanvullingen weer te zien.
Nog iets bij methode twee om op te letten: maak de afbeelding niet te groot, want dan krijg je 'n enorm bestand om te downloaden.

 

[csshunter]

@Goeroeboeroe:
Yep, het in het voorbeeld genoemde plaatje was al teruggebracht tot 265 kleuren gifje van 366x273px, en toch nog 53kB...
En als aanvulling op de aanvulling:

• Heel handig om de kB's van images te reduceren zonder kwaliteitsverlies is het tooltje Smush.it.
• Dat is er ook in de gedaante van een add-on voor Firefox, via YSlow, dat werkzaam is als ook de add-on Firebug in werking is. Zie ook de Yahoo-developer network pagina over YSlow.

Met vriendelijke groet,
CSShinter

 

[Goeroeboeroe]

Dit zeer preutse forum sloopt je link, csshunter, omdat er sh*t in staat.
De link is http://www.smush*t.com/ysmush.it/
met 'n i op de plaats van de ster.
Allemachtig (zou dit ook gefilterd worden?) da's toch 'n doodgewoon woord tegenwoordig...

 

[csshunter]

[offtopic]
Hoi Goeroeboeroe,
dank voor de tip, dat is dolle pret. Oftewel: shít, krijg nou wat!
Dus CSShunter****s (CSShuntershíts, maar dan met een gewoon i-tje = de hits van CSShunter) gaat er ook uit? Inderdaad! - Weer wat geleerd.
Ik ga Yahoo maar eens vragen hun taalgebruik te kuisen.

CSShunter
[/offtopic]

 

[Goeroeboeroe]

<offtopic>Ik merkte 't omdat ik 'n keer 't woord lollig maar dan anders had gebruikt. Da's wel 'n probleem met mijn opvoeding...</offtopic>