Showing background based on resolution

9three · 05-02-2009, 04:35 AM

Hey,

I have a really big background image but I only want to show the full image to those who have the resolution for it, the others will only see partial of the image. I've seen some sites do this effect, how can I accomplish this?

One perfect example is www.worldofwarcraft.com If you notice the left and right background images, they are really big but only show what you resolution can handle.

Thanks :)

jcorradino · 05-03-2009, 04:48 AM

that would be javascript, not php

Code:

var w = screen.width;
var h = screen.height;
document.getElementByID('hiddendiv').style.width=w;
document.getElementByID('hiddendiv').style.height=h;

I would test this in different browsers first, I don't recall if this works in earlier versions of IE.

It might just be easier to use shadowbox, as it is nice and fluid - and best of all - already written :P

9three · 05-03-2009, 04:49 AM

No I got it actually. Using css only :)

jcorradino · 05-03-2009, 05:00 AM

cool, css would be a pretty quick solution to it as well :)

how does it work with IE6? IE6 always seems to have an issue with positioning (well... anything you throw at it, it sometime seems)

sketchMedia · 05-03-2009, 03:52 PM

I'm guessing its just an image that is tiled, then you can use repeat-x to repeat the bg

jcorradino · 05-03-2009, 04:54 PM

oh sorry! I thought you were talking about the lightbox effect the page has set up... I didnt even see the background...

That is simple, all that is is multiple divs making up the background. The left background is set to position to the right and the right background is set to position to the left. This way, when a user comes to the site, they will always see the picture (at least some of it), and it always keeps down on the load time.

CoryMathews · 05-03-2009, 05:06 PM

with css its just setting it as a background image for the body tag and center aligning it. Then if anyone has a really large resolution you must make the choice of tiling the background or just having a solid color.

jcorradino · 05-03-2009, 06:16 PM

Quote:

Originally Posted by CoryMathews

with css its just setting it as a background image for the body tag and center aligning it. Then if anyone has a really large resolution you must make the choice of tiling the background or just having a solid color.

Actually, that is not the case in this instance. The images are applied as a background on the body (as a 2609x599 px image), and in the "ne-center" div inside of the navigation (as a 980x548 px image). Not exactly the most elegant way to achieve this, but it works.

CoryMathews · 05-04-2009, 03:49 AM

Quote:

Originally Posted by jcorradino

Actually, that is not the case in this instance. The images are applied as a background on the body (as a 2609x599 px image), and in the "ne-center" div inside of the navigation (as a 980x548 px image). Not exactly the most elegant way to achieve this, but it works.

What? I did not follow that.