Website met schalende achtergrond

Dag omt'ers,

Ik ben bezig een website te maken, voor het ontwerp heb ik een beeldvullende afbeelding.

Om de achtergrondafbeelding beeldvullend te krijgen heb ik nu de breedte op 100% gezet, dit werkt natuurlijk maar voor een deel zoals ik het graag hebben wil. Als je venster smaller wordt verschijnt er een egale achtergrond onderaan het beeld.

Ik heb even een schetsje gemaakt van hoe ik de afbeelding graag geplaatst wil hebben:

[img:d0f608fc9c]http://www.bartali.nl/userdata/image/browserwindow_picture.jpg[/img:d0f608fc9c]

De afbeelding moet dus altijd gecentreerd zijn en het volledige scherm vullen; bij een breed venster vult de afbeelding het venster horizontaal en vallen de boven- en onderkant weg, bij een smal venster vult de afbeelding het venster verticaal en vallen de zijkanten weg. Dit uiteraard zonder scrollbars :mrgreen:

Voor mijn gevoel heb ik het halve internet al afgezocht, maar ik kom dit nergens tegen…

Is dit effect eenvoudig te bereiken, d.m.v. een DIV bijvoorbeeld? Het liefst wil ik het met html/css maken, maar als iemand een andere oplossing weet hoor ik het ook graag natuurlijk :slight_smile:

Alvast bedankt voor het meedenken!

Met puur CSS kom je er niet denk ik; er zal Javascript aan te pas moeten komen denk ik. Misschien kun je iets met [url=http://buildinternet.com/live/supersized/]Supersized[/url]. Ik weet het: "No extra whitespace, no scrollbars - the entire browser window is always filled" is niet wat je zoekt, maar deze of andere jQuery, DoJo, Prototype, MooTools, ... plugins kunnen het misschien wel voor elkaar krijgen.

(En hier heb je ook niks aan, maar: complimentje voor de vraagstelling!)

EDIT: ik zie bij de Supersized uitleg een link naar iets dat wel op jouw vraag lijkt?

Inderdaad, [url=http://www.so-uk.net/tester5.html]die link[/url] bij "Inspiration" op de Supersized pagina lijkt wel de oplossing: [code:1:991d092cf6]<html> <head> <style type="text/css"> html,body,#bg,#bg table,#bg td{width:100%;height:100%;overflow:hidden} img{display:block} #bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%} #bg td{vertical-align:middle;text-align:center} #bg img{min-height:50%;min-width:50%;margin:0 auto} </style> </head> <body> <div id="bg"> <div> <table cellpadding="0" cellspacing="0"> <tr> <td><img alt="" src="http://www.roto.org/images/testbeeld.png" /></td> </tr> </table> </div> </div> </body> </html>[/code:1:991d092cf6]

Misschien heb je [url=http://dl.getdropbox.com/u/8459/resize.zip]hier[/url] (zipje) iets aan?

Vorige week heb ik toevallig met dit probleem zitten spelen, en heb het redelijk kunnen oplossen: [url]http://www.designbyfoam.nl/[/url]. De achtergrondafbeelding wordt herschaald bij laden en bij resizen van de browser, en op zo'n manier dat de verhoudingen van de afbeelding intact blijven en er geen whitespace getoond wordt.

Als je de moeite neemt in de broncode te kijken dan zit de truc 'm in foam.js. Lang verhaal om uit te leggen, maar als je een beetje thuis bent in javascript moet je er wel uit kunnen komen. Ik gebruik overigens wel prototype+scriptaculous, dus code 1 op 1 overnemen zal niet zomaar werken. Het enige wat mijn script overigens niet doet is centreren, maar daar moet je uit kunnen komen als het resizen je wel lukt.

Script werkt overigens niet in IE, dat staat nog op m’n eigen todo…

Wow, die code van palahala doet het ook keurig, en zonder javascript. Netjes!

[quote:c2899cdd05="Shiny"]Vorige week heb ik toevallig met dit probleem zitten spelen, en heb het redelijk kunnen oplossen: [url]http://www.designbyfoam.nl/[/url].[/quote:c2899cdd05] Ziet er mooi uit (dus: welkom op OMT!), maar: daar wordt de bovenkant niet "weggeknipt" als het venster niet hoog genoeg is (geen verticale center positionering), toch? (EDIT: oh, dat schreef je zelf ook al...)

Overigens schrijft de maker van Supersized over die “alternate CSS fix” die ik hierboven gebruikt heb:

[quote:c2899cdd05=“Sam Dunn”][b:c2899cdd05]Inspiration[/b:c2899cdd05]

Over at Sitepoint forums a similiar thread came up, providing a neat mooTools example and alternate CSS fix, however both faced issues with browser compatibility.[/quote:c2899cdd05]
Dus: dat wordt dat Sitepoint forum lezen en testen in andere browsers…

[quote:c2899cdd05=“Shiny”]Script werkt overigens niet in IE, dat staat nog op m’n eigen todo…[/quote:c2899cdd05]
…of in jouw geval, zonder centreren dus, wél Supersized gebruiken?

Wow, dat zijn goede reacties 8)

Ik heb even snel gekeken naar de links, en hoewel het niet exact is zoals ik het in gedachten heb kom designbyfoam érg dicht in de buurt! De code van palahala is erg mooi en eenvoudig, maar bij een smal venster krijg je wel witranden boven en onder… Dat zal in de praktijk misschien niet voorkomen.

Ik ga eens stoeien met de verschillende voorbeelden en zien wat het effect op het ontwerp is.

Tot zover alvast erg bedankt!! :slight_smile:

[quote:7822f4f331="phobia"]De code van palahala is erg mooi en eenvoudig, maar bij een smal venster krijg je wel witranden boven en onder..[/quote:7822f4f331] He, je hebt gelijk. Ik heb die code niet eens lokaal getest (wel in een TryIt Editor van [url=http://www.w3schools.com/CSS/tryit.asp?filename=trycss_background-color]w3schools[/url] maar blijkbaar niet goed opgelet). Het [url=http://www.so-uk.net/tester5.html]origineel[/url] heeft dat volgens mij niet, toch? Dan heb ik niet goed gekopieerd!

Aha, het origineel heeft dat ook, maar [url=http://www.so-uk.net/images/asdsd.jpg]dat plaatje[/url] is een stuk hoger dan [url=http://www.roto.org/images/testbeeld.png]dat testbeeld[/url] en dan zie je het niet zo snel!

(Belangrijker: die opmerkingen over cross-browser compatibiliteit…)

Ik heb het in het origineel helaas ook, is dus niet helemaal ideaal. Phobia, als ik jou was zou ik proberen dat [url=http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/]supersize[/url] aan de praat te krijgen. Ziet eruit als een keurige kant-en-klare oplossing.

Helaas, die doet het ook... :)

Ik ben even bezig met de code van Shiny, die geeft echt een mooi resultaat. Misschien dat ik dan zelfs het centreren door de vingers zie :wink: Alleen die opmerking over IE, ik zal eens kijken wat er van mijn creatie overblijft in IE (dat is natuurlijk de browser die de klant ook gebruikt :cry: )

Hij doet het nu wel in IE. Er stond ergens een niet-afgemaakte html-tag in de broncode. Firefox en Safari keken daar langs, IE niet.

Dat scheelt weer een zorg! Ik probeer ook die supersized aan de gang te krijgen, alleen nog even een php-server vinden :o Is het script van designbyfoam afgeleid van die supersized?

[quote:b086f0acbf="phobia"]Ik probeer ook die supersized aan de gang te krijgen, alleen nog even een php-server vinden[/quote:b086f0acbf] Uhh, jQuery is gewoon JavaScript. Heb je geen PHP voor nodig.

[quote:2af94a9c0d="elice82"]Misschien heb je [url=http://dl.getdropbox.com/u/8459/resize.zip]hier[/url] (zipje) iets aan?[/quote:2af94a9c0d] Ik vind die andere oplossingen mooier: die doen de resize al terwijl je het venster van grootte verandert.

Deze aanvulling vond ik tussen de reacties, die doet exact wat ik bedoelde.. Horizontaal en verticaal gecentreerd, en met mooie transities:

http://aenui.com/supersized/

Ik zal eens kijken welke het mooist uitkomt met de beelden die ik heb.