Plaatje over de gehele achtergrond uitrekken
Door Jesper Diovo, 19 jaar geleden, 18.407x 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
Er zijn 10 reacties op 'Plaatje over de gehele achtergrond uitrekken'
0 
-0 
-0
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 ;-)
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 ;-)
0 -0
-0
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.
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.
0 -0
-0
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)
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)
0 -0
-0
"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.
ik heb het niet getest (de code) maar dit is waarschijnlijk omdat IE height:100% niet toestaat, ook position: absolute vind IE niet leuk.
0 -0
-0
@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.
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.
0 -0
-0
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.
0 -0
-0
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...
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...
0 -0
-0
@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
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
0 -0
-0
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.
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.
PHP hulp
0 seconden vanaf nu