Gebruik CSS3 om een achtergrond uit te rekken om een webpagina passend te maken

Afbeeldingen vormen een belangrijk onderdeel van aantrekkelijke website-ontwerpen. Dit omvat het gebruik van achtergrondafbeeldingen. Dit zijn de afbeeldingen en afbeeldingen die worden gebruikt achter delen van een pagina in tegenstelling tot afbeeldingen die worden gepresenteerd als onderdeel van de inhoudspagina's. Deze achtergrondafbeeldingen kunnen visuele interesse aan een pagina toevoegen en u helpen het visuele ontwerp te bereiken waarnaar u op een pagina zoekt.

Als u met achtergrondafbeeldingen begint te werken, zult u ongetwijfeld het scenario tegenkomen waarbij u wilt dat een afbeelding wordt uitgerekt om op de pagina te passen. Dit geldt met name voor responsieve websites die worden afgeleverd op een breed scala aan apparaten en schermformaten.

Deze wens om een achtergrondafbeelding uit te rekken, is een veel voorkomende wens voor webontwerpers, omdat niet elke afbeelding in de ruimte van een website past. In plaats van een vaste grootte in te stellen, kan het uitrekken van de afbeelding hem buigen om op de pagina te passen, ongeacht hoe breed of smaller het browservenster is.

De beste manier om een afbeelding uit te rekken op de achtergrond van een pagina, is door de CSS3-eigenschap te gebruiken voor achtergrondgrootte. Hier is een voorbeeld dat een achtergrondafbeelding gebruikt voor de hoofdtekst van een pagina en de grootte instelt op 100%, zodat deze altijd wordt uitgerekt om op het scherm te passen.

lichaam { achtergrond: url (bgimage.jpg) geen herhaling; achtergrondgrootte: 100%; }

Volgens caniuse.com werkt deze eigenschap in IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ en op alle grote mobiele browsers. Dit dekt je voor alle moderne browsers die vandaag beschikbaar zijn, wat betekent dat je deze eigenschap moet gebruiken zonder bang te hoeven zijn dat het niet op iemands scherm zal werken.

Een uitgerekte achtergrond in oudere browsers faken

Het is zeer onwaarschijnlijk dat u browsers ouder dan IE9 zou moeten ondersteunen, maar laten we aannemen dat u zich zorgen maakt dat IE8 deze eigenschap niet ondersteunt. In dat geval kun je een uitgerekte achtergrond faken. En u kunt de browser-voorvoegsels voor Firefox 3.6 (-moz-background-size) en Opera 10.0 (-o-background-size).

De eenvoudigste manier om een uitgerekte achtergrondafbeelding te faken is deze over de hele pagina uit te rekken. Dan krijg je geen extra ruimte of moet je je zorgen maken dat je tekst in het uitgerekte gebied past. Hier is hoe het te doen:

id = "bg" />

Zorg er eerst voor dat alle browsers een hoogte van 100%, 0 marges en 0 opvulling hebben op de enHTML LICHAAM elementen. Plaats het volgende in de kop van uw HTML-document:
Voeg de afbeelding waarvan u de achtergrond wilt zijn toe als eerste element van de webpagina en geef deze de ID kaart van "bg":
Plaats de achtergrondafbeelding zodanig dat deze boven en links is bevestigd en 100% breed en 100% hoog is. Voeg dit toe aan je stylesheet:
1. img # bg {
Voeg al uw inhoud toe aan de pagina in a DIV element met een ID kaart van "inhoud". Voeg de toe DIV onder de afbeelding:Al uw inhoud hier - inclusief koppen, alinea's, etc.
1. Opmerking: het is interessant om nu naar uw pagina te kijken. De afbeelding moet uitgerekt worden weergegeven, maar uw inhoud ontbreekt volledig. Waarom? Omdat de achtergrondafbeelding 100% hoog is en de inhouddeling is na het beeld in de stroom van het document - de meeste browsers zullen het niet weergeven.
Plaats uw inhoud zodat deze relatief is en een heeft z-index van 1. Dit zal het boven de achtergrondafbeelding brengen in browsers die voldoen aan de normen. Voeg dit toe aan je stylesheet:
1. #inhoud {
Maar je bent nog niet klaar. Internet Explorer 6 voldoet niet aan de standaarden en heeft nog steeds enkele problemen. Er zijn veel manieren om de CSS te verbergen voor elke browser, maar IE6, maar de gemakkelijkste (en minst waarschijnlijk andere problemen veroorzaken) is om voorwaardelijke opmerkingen te gebruiken. Zet het volgende na uw stylesheet in de kop van uw document:
Voeg in de gemarkeerde opmerking nog een stylesheet toe met enkele stijlen om IE 6 leuk te laten spelen:
Test ook in IE 7 en IE 8. Mogelijk moet u de opmerkingen aanpassen om ze ook te ondersteunen. Het werkte echter toen ik het testte.

OK - dit is weliswaar VEEL overkill. Zeer weinig sites moeten IE 7 of 8 ondersteunen, veel minder IE6! Als zodanig is deze aanpak verouderd en waarschijnlijk onnodig voor u. Ik laat het hier meer als een model van nieuwsgierigheid over hoeveel moeilijkere dingen waren voordat al onze browsers zo mooi samen speelden!

Een uitgespreide achtergrond maken over een kleinere ruimte

U kunt een vergelijkbare techniek gebruiken om een uitgerekte achtergrondafbeelding over een a DIV of een ander element op uw webpagina. Dit is een beetje lastiger omdat je ofwel absolute positionering moet gebruiken ofwel vreemde spatiëringproblemen hebt voor andere delen van je pagina.

Plaats de afbeelding op de pagina die ik als achtergrond wil gebruiken.
Stel in de stijlpagina een breedte en hoogte in voor de afbeelding. Opmerking: u kunt percentages gebruiken voor breedte of hoogte, maar ik vind het gemakkelijker om de lengtewaarden voor de hoogte aan te passen.
1. img # bg {
Plaats uw inhoud in een div met de ID kaart "inhoud" zoals we hierboven deden:Al uw inhoud hier
Geef op dat de content-div dezelfde breedte en hoogte heeft als de achtergrondafbeelding:
1. div # content {
Plaats de inhoud vervolgens op dezelfde hoogte als de afbeelding.Dus als je afbeelding 30em is, zou je een stijl van top hebben: -30em; Vergeet niet om een z-index van 1 op de inhoud te zetten.
1. #inhoud {
Voeg vervolgens een z-index van -1 toe voor IE 6-gebruikers, zoals u hierboven deed:

Nogmaals, met achtergrondgrootte die geniet van de brede browserondersteuning die het nu biedt, is deze aanpak ook zeer waarschijnlijk overbodig en gepresenteerd als een product van een vervlogen tijdperk. Als u deze aanpak toch wilt gebruiken, moet u dit in zoveel browsers testen als u kunt. En als uw inhoud van grootte verandert, moet u de grootte van uw container en achtergrondafbeelding wijzigen, anders krijgt u vreemde resultaten.