HTML - Fullscreen background image goede proporties

[Skating_vince]

Momenteel ben ik bezig om een website te bouwen met een fullscreen achtergrond plaatje die mee schaalt met de browser, maar die de foto niet vervormt. De foto moet uitgesneden worden om de goede verhoudingen te behouden. Online heb ik een voorbeeld gevonden die precies doet wat ik wil in Firefox en Chrome. Hij schaalt de foto om hem browser vullend te maken en de foto blijft in verhouding bij het resizen van de browser.

Maar wanneer ik de pagina open met IE vult de foto de achtergrond niet. Wanneer ik de browser kleiner maak, schaalt de foto wel goed mee in de goede verhoudingen (dus met bijsnijden).

Heeft iemand een idee hoe ik de foto de browser kan laten vullen en daarbij de goede verhoudingen kan bewaren in IE. Ik heb geprobeerd om een width/height="100%" toe te voegen, maar dan wordt de foto veel te groot gemaakt.

Update: Nu zelf de javascript aan het schrijven zodat ik de foto altijd goed kan plaatsen. Bedankt voor het meedenken!

[ Voor 18% gewijzigd door Skating_vince op 26-05-2009 14:10 . Reden: probleem opgelost ]

[RobIII]

Ik kan je nu al op een briefje geven dat dit niet gaat werken; je afbeelding is immers geen achtergrond maar gewoon een image in een table. Als daar straks nog content over heen moet/gaat ga je al in de nesten komen.

Maar er zijn toch plenty voorbeelden te vinden, niet?

[ Voor 24% gewijzigd door RobIII op 26-05-2009 10:20 ]

[Skating_vince]

Het is alleen voor de hoofdpagina. Doordat de div een z-index van -1 en een absolute positie heeft, komt andere content er gewoon overheen. Dat heb ik ook al uitgeprobeerd .

[Verwijderd]

Skating_vince schreef op dinsdag 26 mei 2009 @ 10:20:
Het is alleen voor de hoofdpagina. Doordat de div een z-index van -1 en een absolute positie heeft, komt andere content er gewoon overheen. Dat heb ik ook al uitgeprobeerd .

ook getest in Firefox?
Die kan toch niks met negatieve z-indexen?

[Skating_vince]

Ja, dat is ook getest onder Firefox en Chrome. Ik zal het menu nog even terug zetten, zodat dat het zichtbaar wordt. Het menu is alleen nu nog een tabel en nog lang niet af, daarom had ik hem even verwijderd. Negeer dat even, maar kijk vooral naar een oplossing voor mijn probleem ?

[Skating_vince]

RobIII schreef op dinsdag 26 mei 2009 @ 10:19:
Ik kan je nu al op een briefje geven dat dit niet gaat werken; je afbeelding is immers geen achtergrond maar gewoon een image in een table. Als daar straks nog content over heen moet/gaat ga je al in de nesten komen.

Maar er zijn toch plenty voorbeelden te vinden, niet?

Ja, dat klopt. Maar die scalen alleen, zonder rekening te houden met de verhoudingen. Dan krijg je misvormde beelden.

[Gersomvg]

Verwijderd schreef op dinsdag 26 mei 2009 @ 10:23:
[...]


ook getest in Firefox?
Die kan toch niks met negatieve z-indexen?

Misschien werkt dit dan:

Cascading Stylesheet:

*{
z-index:2;
}

.plaatje{
z-index:1;
}

Of krijg je dan ongewenste neveneffecten?

[ Voor 7% gewijzigd door Gersomvg op 26-05-2009 11:19 ]

[Skating_vince]

Gersompie schreef op dinsdag 26 mei 2009 @ 11:18:
[...]

Misschien werkt dit dan:

Cascading Stylesheet:

*{
z-index:2;
}

.plaatje{
z-index:1;
}

Of krijg je dan ongewenste neveneffecten?

Dit is niet het probleem. Het probleem is dat de foto op de pagina in IE niet fullscreen wordt. Met de z-index heb ik geen probleem