Uitrekken en schalen van een CSS afbeelding op de achtergrond - alleen met CSS

Ik wil dat mijn achtergrondafbeelding uitrekt en schaalt afhankelijk van de browser viewport grootte.

Ik'heb wat vragen gezien op Stack Overflow die het werk doen, zoals Stretch and scale CSS background bijvoorbeeld. Het werkt goed, maar ik wil de afbeelding plaatsen met background, niet met een img tag.

Daarin wordt een img tag geplaatst, en dan met CSS een eerbetoon aan de img tag.

width:100%; height:100%;

Het werkt, maar die vraag is al een beetje oud, en stelt dat in CSS 3 het resizen van een achtergrondafbeelding best goed werkt. Ik'heb dit geprobeerd voorbeeld de eerste, maar bij mij werkte het niet.

Is er een goede methode om het met de background-image declaratie te doen?

Community
Bewerkte vraag 23ste1 mei 2017 в 12:26
Programmering
background css
19de6 juli 2009 в 3:51
26 views

Met behulp van de code die ik noemde...

HTML

<div id="background">

</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

Dat geeft het gewenste effect: alleen de inhoud scrollt, niet de achtergrond.

De achtergrondafbeelding past zich aan aan de browser viewport voor elke schermgrootte. Wanneer de inhoud niet in de viewport van de browser past, en de gebruiker de pagina moet scrollen, blijft de achtergrondafbeelding gefixeerd in de viewport terwijl de inhoud scrollt.

Met CSS 3 lijkt dit een stuk eenvoudiger te zijn.

Community
Bewerkt antwoord 23ste1 mei 2017 в 12:26
Commentaren (5)

Je kunt eigenlijk hetzelfde effect bereiken als met een achtergrondafbeelding met de img tag. Je hoeft alleen de z-index lager in te stellen dan al het andere, position:absolute in te stellen en een transparante achtergrond te gebruiken voor elk vakje op de voorgrond.

Commentaren (4)

Wil je dit bereiken met slechts één afbeelding? Want je kunt eigenlijk iets maken dat lijkt op een uitrekkende achtergrond met behulp van twee afbeeldingen. PNG afbeeldingen bijvoorbeeld.

Ik'heb dit eerder gedaan, en het'is niet zo moeilijk. Trouwens, ik denk dat uitrekken alleen maar afbreuk zou doen aan de kwaliteit van de achtergrond. En als je een enorme afbeelding toevoegt zou het trage computers en browsers vertragen.

Peter Mortensen
Bewerkt antwoord 30ste6 september 2012 в 3:51
Commentaren (3)