Fullscreen Background Jquery Method

[elstinko]

I adopted the 3rd method on the fullscreen background page and it works amazingly accept I have an issue with Chrome not honoring the height 100%. It keeps locking aspect ration while the other browsers compensate. Here is our mockup.

http://mainlineserver.com/mockup2/

Any insight on why Chrome is doing this and any workarounds would be most appreciated!

[vanderwijk]

On IE8 it also does not seem to display correctly, a possible workaround would be using the jQuery Supersized plugin. The core version of this plugin should do exactly what you want.

[TheLeggett]

One possible non-js solution would be using CSS Media Queries to resize the background depending on the viewport size.

I just sort of ballparked these numbers, but it seems to do an okay job with sizing the background:

@media (max-width: 1400px) and (min-height: 600px) {

.bgwidth {

height:100%;

width:auto;

}

}

[elstinko]

I love the viewport size method but it does not work in any version of IE. Well maybe 9.

Anyway, my IE 8 is displaying right. The only browser that is not working for me is Chrome.

[elstinko]

What is strange is the example on this website does work with chrome. Its my implementation that is not.

[Author]

Posts