Volledige afbeelding als achtergrond

[Storm90]

Beste tweakers,

Ik wil voor een webshop een fullscreen achtergrond gebruiken. Nu moet er op elke mogelijke resolutie, de volledige achtergrond zichtbaar zijn. Het mag dus niet zo zijn dat je op 24" meer ziet van de achtergrond dan op een 15" scherm. Nu dacht ik dat heel eenvoudig met de volgende CSS code op te lossen:

code:

html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#background{
position:absolute;
height:100%;
width: 100%;
margin: 0;
padding: 0;
}

Maar op deze manier wordt de afbeelding gestretcht wat niet de bedoeling is. En volgens mij wordt de laadtijd hierdoor ook een stuk langer, als ik een hoge resolutie achtergrond ga gebruiken.

Hebben jullie misschien een goede oplossing? Is er anders misschien een oplossing dat ik 3 afbeeldingen heb en op bepaalde resoluties een kleinere of grotere afbeelding gebruik?

Mijn laatste vraag: Is het belangrijker dat een achtergrond afbeelding breed, hoog of vierkant is?

[MsG]

Het kan toch niet zo zijn dat je níet meer ziet van een achtergrond op hogere resolutie terwijl je ook nog fullscreen wil gaan. Het lijkt me dan ook beter om niet met reusachtige foto's te gaan werken maar gewoon een herhalend patroontje als achtergrond, of gewoon een kleur.

[remmelt]

Aangezien de grootte van een browservenster arbitrair is, zul je óf altijd stretching hebben óf een deel van de achtergrondplaat niet kunnen tonen. Stel dat iemand een venster van 300 breed bij 900 hoog heeft, wat wil je dan tonen als achtergrond? Of 900 breed en 300 hoog?

Stretching is lelijk, je kan daarom beter kiezen voor een stukje snijden. Wat je zou kunnen doen is een drietal achtergronden maken met verschillende groottes, dan met javascript uitlezen wat de afmetingen van de viewport zijn en op basis daarvan de meest geschikte achtergrondversie kiezen.

[Bozozo]

Of een gecentreerde achtergrondafbeelding die fade naar een achtergrondkleur.

[Storm90]

...Het lijkt me dan ook beter om niet met reusachtige foto's te gaan werken maar gewoon een herhalend patroontje als achtergrond, of gewoon een kleur.

Dat is helaas geen oplossing, dat past niet bij het design.

Stretching is lelijk, je kan daarom beter kiezen voor een stukje snijden. Wat je zou kunnen doen is een drietal achtergronden maken met verschillende groottes, dan met javascript uitlezen wat de afmetingen van de viewport zijn en op basis daarvan de meest geschikte achtergrondversie kiezen.

Dat laatste is misschien een oplossing, ik ben ondertussen verder aan het zoeken op google hoe ik dit kan realiseren. Als iemand hier op het forum al een oplossing heeft, let me know!

EDIT: Ik heb DE oplossing gevonden zie http://css-tricks.com/perfect-full-page-background-image/ en dan lijkt techniek 1 mij het beste. Ik heb dan ook geen Javascript nodig, waardoor het dus eigenlijk voor elke gebruiker moet werken.

[ Voor 16% gewijzigd door Storm90 op 11-04-2011 18:47 ]