Achtergrond evengroot als resolutie

Status
Niet open voor verdere reacties.
G

gebruiker46

Gebruiker
Lid geworden
22 jul 2010
Berichten
667
Hallo!

Heeft iemand voor mij een html code die ervoor zorgt dat de achtergrond altijd even groot is al de resolutie van het beeldscherm van de gene die de website op dat moment bezoekt. Eventueel kan de afbeelding dat wat vergroot of verkleint worden.

Alvast bedankt!
 
Zoiets? css:
Code: 
#background {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	z-index: 0;
	}
#background img {
	width: 100%; /* voorgrond-img schaalt mee met z'n container */
	}
#wrapper {
	position: relative;
	z-index: 1;
	}
HTML: 
<body>

<div id="background">
	<img src="images/background.png" alt="" /><!-- geen breedte/hoogte opgeven! -->
</div>

<div id="wrapper">

	<h1>Background paginavullend</h1>
	... enz.
</div>
</body>
Geeft deze: bliksekaters.nl/tests/bg-100pct.htm

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
In de meeste browsers werkt ook het volgenden:
Code: 
html, body {
height: 100%;
width: 100%;
overflow: auto;
margin: 0px;
padding: 0px;
}
body {
background-image: url('background-image.png');
background-size: cover;
}

Ik heb hem niet weer getest, maar als het goed is zou dit ook moeten werken.
 
Hoi BazzyTK e.a.,
in de meeste browsers werkt ook het volgende: ... enz.
Klik om te vergroten...
Wat is "de meeste"?
  • "Prior to version 9.0, Internet Explorer offered no support for background-size.
  • "Mozilla Firefox 4.0+"; en "From FF 3.6 to version 4.0, -moz-background-size; no longer support from 4.0 onward".
  • "Opera 10.0+" en "-o-background-size in Opera 9.5; discrepancies with CSS3 specification."
  • "Safari 4.1+ and Chrome 3.0+" en "Safari 3.0+ and Chrome 1.0+: -webkit-background-size, however without support for the contain and cover keywords".
  • Bron: www.css3.info/preview/background-size/
En de stand van zaken van de laatste maand in NL:
Ergo:
  • De {background-size: cover} wordt voor (28,1/50=) 56% van de IE-gebruikers niet ondersteund (o.a. het legioen XP-ers die geen IE9 kunnen gebruiken).
  • In totaal: zo'n 30% van alle NL surfers niet (incl. FF3.6, maar excl. "other" die niet gespecificeerd zijn in de statistiek).
Die 30% van het publiek zit dus bv. (testpagina-a) dit:

bg-cover-ie7.png

cover in ie7 en ff3.6 (a)​

.. in plaats van dit:

bg-cover-chrome.png

cover in Chrome (a en b)​

Met een beetje goede wil (no-repeat, 50% 50%, bg-color erbij; testpagina-b) valt er nog dit van te maken:

bg-cover-ie7-xtra.png

cover in ie7 en ff3.6 (b)​

... maar dan houdt het ook op.

Verder moet je ook altijd erg uitkijken met gemiddeldes: daar zitten ook de diehards in die altijd het nieuwste van het nieuwste moeten hebben, of andere browsers dan IE gebruiken (bv. designers, webontwikkelaars, bèta-testers, computerspel-spelers e.a. "geavanceerde" gebruikers). Die zullen de laatste versies wel hebben, of voor de muziek uitlopen.
Maar neem je een doelgroep als de doorsnee Hema-koopjesjager, dan zal het percentage surfers zonder cover-ondersteuning een stuk hoger liggen dan die 30%.

Conclusie:
Hoewel inderdaad "de meeste browsers" (70%) de cover-eigenschap ondersteunen, valt die 30% toch ook niet uit te vlakken.
Ik zou daarom voorlopig afraden om deze css3-eigenschap te gaan gebruiken als je iedereen een mooi geschaalde background wilt laten zien.
  • De schalende "voorgrond-achtergrond afbeelding" van reactie nr. #2 is cross-browser, daar hoef je het niet voor te laten.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan