Beste mensen,

Ik heb een site: deze opent via een popup (url:http://www.marcpollen.nl/open_max3.html) De popup heeft een achtergrond die schermvullend te zien moet zijn. Na het openen (vd popup) wordt via JS een scherm maximalisatie uitgevoerd. Deze maximalisatie initieeerd een script wat ervoor zorgt dat een laag met afbeelding op achtergrond netjes wordt geresized.

Dit werkt prima op breedbeeld schermen / schermen met een iets hogere resolutie.

Echter op een ouder, bijna vierkant scherm (1280*1000) hier, krijg ik het volgende te zien.



Hoe het nu werkt:
1) de site wordt vullend geopend.
2) de achtergrond wordt m.b.v. JS op maat gemaakt.
3) omdat het erop lijkt dat stap 2 soms wordt overgeslagen heb ik handmatig een venster verklein/vergroot script gemaakt. Dit moet ervoor zorgen dat de afbeelding alsnog wordt geinitialiseerd op de goede manier.

Aanvulling.
Als ik handmatig op maximaliseren klik (rechtsboven naast kruisje) dan wordt de achtergrond wel goed weergegeven na resizen... Hij voert het resizen dus niet goed uit...

Echter ik mis iets / doe iets fout. Wie helpt?!

Gr.
Tim

Hmm ik snap het probleem niet helemaal maar resizen is tog ook gewoon mogelijk met css? width: 100%; height: 100%;

*of gaat het hier niet om de achtergrond?*

Resizen is bij nader inzien ook niet het goede woord. De afbeelding moet ge-herinitialiseerd worden. Daardoor wordt hij op maat gemaakt. Maar lijkt alsof bij kleinere resoluties dit specifieke stuk wordt overgeslagen. Dit zou aan de default afmeting van de afbeelding kunnen liggen. Maar kan hier geen vinger op leggen...

Ik heb niet naar je code gekeken maar je zou het volgende jQuery scriptje kunnen gebruiken. Met deze heb ik nog nooit problemen gehad

http://nanotux.com/plugins/fullscreenr/index.html

@leon, cheers voor de suggestie. Ga dit zeker overwegen.

Als je een plaatje fullscreen wilt hebben is er niks van javascript of enige andere code nodig, je gebruikt gewoon css ervoor, zoals :

body{
background-image : url('images/image.png');
width : 100%;
height : 100%;
margin : 0;
font-size : 16px;
color : #ffffff;
font-family : Times new roman, Arial;
}

Nu heb ik in de css gezegd, maak een image die altijd 100% width en 100% height is.
Maar dit kan soms fout gaan als de image te klein is.
Maar je hebt ook geen repeatende bg dus.

Gaat erom dat het allemaal in verhouding blijft, vandaar dat ik js gebruik.
Het script van Leon werkt idd foutloos, goede suggestie dus voor mensen die hetzelfde willen als ik.
Gr.
tim

Origineel gepost door Martijn van meijel

Als je een plaatje fullscreen wilt hebben is er niks van javascript of enige andere code nodig, je gebruikt gewoon css ervoor, zoals...

[code etc.]

Gaat dus niet werken. De div past zich aan het scherm aan, maar de afbeelding blijft hetzelfde.

Met CSS3 is het wel mogelijk om dit door middel van 'background-size' aan te passen, maar dit werkt niet in iedere browser.

je zou een position absolute div in de achtergrond kunnen zetten met een image van 100% bij 100% en dan de div ook 100% en 100% maken, zo wordt de achtergrond gestretched.