Plaatje over de gehele achtergrond uitrekken

Door Jesper Diovo, 13 jaar geleden, 15.356x bekeken

Een tijdje geleden was er een vraag naar een manier om een plaatje op de achtergrond te zetten dat helemaal uitrekt. Via een simpele background-optie in CSS gaat dat niet. Nu heb ik een snippet van Jan Koehoorn - over een plaatje over de gehele pagina uitrekken - uitgebreid naar een plaatje over de achtergrond geheel uitrekken, dat je daaroverheen nog je website kan maken.

Het is echt heel simpel, maar voor beginners soms toch nog wel lastig om tot deze oplossing te komen.

Ohja, succesvol getest in FireFox 3.0, Safari en Opera. IE6.0 en Netscape Navigator 9 deden moeilijk....

Voorbeeld: http://www.dzjemo.nl/phphulp/totall-bg.html

Gesponsorde koppelingen

PHP script bestanden

  1. plaatje-over-de-gehele-achtergrond-uitrekken

 

Er zijn 10 reacties op 'Plaatje over de gehele achtergrond uitrekken'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
W W
W W
13 jaar geleden
 
0 +1 -0 -1
position: absolute; ???
- -
- -
13 jaar geleden
 
0 +1 -0 -1
Kan handig zijn voor beginners!

Werkt hier ook in Chrome. Dat het in IE6 niet werkt maakt (mij) niet uit, en Netscape is toch al deaud, dus ook dat maakt niet uit ;-)
Lode
Lode
13 jaar geleden
 
0 +1 -0 -1
Kan volgens mij ook met alleen een body style

body{
width: 100%;
height: 100%;
background: url(blaat.png) fixed;
}

Wat dan over het algemeen weer een veelste grote image betekend. Die relatief veel bandbreedte gebruikt en dus ook niet erg efficient kan zijn.
Dus behoorlijk onzinnig IMO.
Jelmer -
Jelmer -
13 jaar geleden
 
0 +1 -0 -1
De grap van deze methode is dat het plaatje zich aanpast aan de verhoudingen van het venster. Een normaal plaatje via CSS wordt alleen weergegeven in zijn oorspronkelijke afmetingen.

Vaak is het niet nodig, en is het met een combinatie van een in-één-richting herhalende achtergrond plus een aansluitende achtergrond-kleur ook goed op te lossen, maar ik kan wel situaties verzinnen waarin dit handig is.

position:fixed werkt inderdaad niet in Internet Explorer, maar volgens mij bestaat daar wel een truucje voor. (Een van de sites op Zen CSS Garden maakt er gebruik van, die met het zwarte frame om de pagina, met een groene tempel en boeddhist op de achtergrond)
Richard
richard
13 jaar geleden
 
0 +1 -0 -1
"IE6.0 en Netscape Navigator 9 deden moeilijk"

ik heb het niet getest (de code) maar dit is waarschijnlijk omdat IE height:100% niet toestaat, ook position: absolute vind IE niet leuk.
Robert Deiman
Robert Deiman
13 jaar geleden
 
0 +1 -0 -1
@richard
Position:absolute kan prima in IE6 hoor, maar fixed heeft die meer moeite mee. Height:100% kan ook prima, maar dan moet je de body,html ook op 100% zetten.

@Jezpur en Jelmer
Wanneer je in de css óf de hoogte óf de breedte van de afbeelding opgeeft, dan behoudt die wel de verhoudingen van de afbeelding. Hij bedekt dan wel niet altijd de gehele achterkant, maar dat moet je dan maar voor lief nemen. Hij rekt wel mee met de website in elk geval.
Jesper Diovo
Jesper Diovo
13 jaar geleden
 
0 +1 -0 -1
Thanks voor de reacties! Ik weet dat het geen hoogstandje is, maar zoals ik al zei: het kan moeilijk zijn voor een beginner en dan biedt dit de ideale oplossing.
Erick Schluter
Erick Schluter
13 jaar geleden
 
0 +1 -0 -1
Moet je dit niet gewoon als volgt doen:

body{
background: #a99d8b url('images/pattern.gif') repeat;
}

De pattern.gif kun je bijvoorbeeld hier vandaan halen. Als er geen plaatje aanwezig is word in dit geval de kleur #a99d8b als achtergrondvulling gebruikt...
Rens nvt
Rens nvt
13 jaar geleden
 
0 +1 -0 -1
@Erick en anderen: het is nu juist de bedoeling om GEEN pattern, maar 1 plaatje (bijvoorbeeld een foto) op de achtergrond weer te geven, van de linkerkant van het scherm naar de rechterkant, en van boven tot onder.

Omdat dit ook al eerder gezegd is, nog een keer:
1 plaatje op 100% hoogte en 100% breedte van de body

Zo, dat moet nu wel duidelijk zijn :-)

Edit: en nog een demo voor het geval dat: http://www.markschenk.com/cssexp/background/scaledbgimage.html
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Rene Wennekes
Rene Wennekes
13 jaar geleden
 
0 +1 -0 -1
hmmmm...... is wel handig voor het versturen van kerstkaarten in html naar al je vrienden wat ik doe met een php script.

Alleen is het nadeel wel dat als je een mooi plaatje hebt de verhoudingen enorm verstoord kunnen worden bij mensen die hun browser in een vreemde verhouding hebben aangepast.
Stel je voor een ferrari met eclipse wielen.

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. plaatje-over-de-gehele-achtergrond-uitrekken

Labels

  • Geen tags toegevoegd.

Navigatie

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.