TalkPHP - Showing background based on resolution

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - Showing background based on resolution (http://www.talkphp.com/xhtml-html-css/4207-showing-background-based-resolution.html)

9three

05-02-2009 04:35 AM

Showing background based on resolution

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 (Post 23609)

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 (Post 23610)

What? I did not follow that.

All times are GMT. The time now is 11:03 PM.