Different graphics for various screens?

Is it possible without JS?

[Wlauzon]

I am working on some webpages that I want to (more or less) fit any screen width from around 700 to 1280. The problem is that a few of the graphics, such as company logo, get too large at low resolutions.

Is it possible with CSS to load a different sized graphic for different screen resolutions?

I know it can be done with javascript, but trying to avoid that if possible.

[Span]

No, there is no way for CSS to know anything about window width or screen resolution. Without Javascript the only thing you can do is use a relative size (100%) for your graphics instead of px.

<div style="width:20%;"><img src="" width="100%" alt="" /></div>

[bedlam]

I am working on some webpages that I want to (more or less) fit any screen width from around 700 to 1280.

I'm not so sure about the logic of trying to do this in the first place--at least if there's a significant amount of text for reading in the site.

Unless you are already limiting the width of the block containing the text somehow, it will likely form unreadably long lines at 1280px, and users will have to resize their windows in any case.

-b

[Wlauzon]

Unless you are already limiting the width of the block containing the text somehow, it will likely form unreadably long lines at 1280px, and users will have to resize their windows in any case.

I am actually designing it to work "best" in 1024x, but I also want to avoid scroll bars, overlapping text/graphics, and similar problems.

The long lines are another issue that I am still working on :D. I may have to come up with some way to resize or limit the column width - still not sure how best to do this.

This is my first time trying to do a "totally css" site, and a few things are still being worked out - fixing one issue at a time.

[Wlauzon]

No, there is no way for CSS to know anything about window width or screen resolution. Without Javascript the only thing you can do is use a relative size (100%) for your graphics instead of px.

<div style="width:20%;"><img src="" width="100%" alt="" /></div>

Well.. actually.. I did not know that the "width" would work on graphics ;/

Thanks, will give that a try and see if it does what I want.

[bedlam]

Well.. actually.. I did not know that the "width" would work on graphics

I think it will, but it will look awful. Resizing an image this way just stretches/shrinks it in the browser. You really, really, really want to avoid doing this.

If I absolutely had to do what you're attempting, here's how I'd go about it:

1. Try to talk the boss/client out of it, but failing that...

2. Use js to detect screen resolution

3. Use js to set an id on the body element. E.g.:
   

   document.getElementsByTagName('body')[0].id='res1024';

4. Define sets of styles for each resolution that you mean to target using background images E.g.:
   

   #res1024 #header { background:transparent url(path/to/image.gif) no-repeat top left; }

5. Make sure that the default set of styles (i.e. the one that would be present if javascript is disabled) works well at 800x600 and 1024x768.
   

The thing is, that having spent the effort to do step 4, I'd probably just decide that the js parts were pointless in the first place--especially since, at this date anyway, I'd have accounted for the great majority of screen resolutions/browser window sizes anyway with css alone...

-b

[willybfriendly]

Not quite on point, but it is possible to resize an image on the fly by defining the width/height in ems. You have to do a bit of math first to maintain the aspect ratio.

This will cause images to resize if the user has set IE to display a larger text size.

An old WW member (BigBaer) who was a whiz at CSS shared this a couple years ago. It is worth looking for his site to see some of the amazing things he pulled off. Combine his name with css tutorials and you should find it. (Unfortunately, some of his work no longer resides on his server:()

WBF

[Wlauzon]

You are right - you CAN resize it using either ems or % - but as someone else noted, it does not look that good in some cases. And you are basicall back to the old problem like in HTML as if you had set the graphic size to 50x100 for a 200x400 picture - still the same picture size, it is just rendered smaller on the screen (if you try to go bigger, it gets pretty horrible looking).

So I may have to just pick a "best size" for those graphics and live with it, or use the JS method where it just loads a different stylesheet that uses a scaled graphic. (Any idea how many people turn off javascript?).

This is only a real problem with 3 graphics - such as the company logo - but they appear on every page.

especially since, at this date anyway, I'd have accounted for the great majority of screen resolutions/browser window sizes anyway with css alone...

It appears from all the Googling I have done that 800, 1024, and 1280 would cover about 95% of what people are using, and the 800x600 seems to be dropping rapidly as more and more new computers come set at the default of 1024x768.