Page 1 of 1

Resize, then stop -- max width

Posted: Tue May 31, 2005 3:27 pm
by Skara
I've got a nice picture as a background for my header. Problem is, setting it at a width 800x600 can see will make it too small, setting it at a width 1024x768 will make it too big for 800x600, and not setting a width will make the image repeat (ugly) on higher resolutions.

So, I need something that will stay at, say, 80% of the screen until it reaches a certain width (1100px), then stops getting bigger.
Gotta be compatible with all browsers too.

Posted: Tue May 31, 2005 4:20 pm
by John Cartwright
Perhaps this is more of an issue of your design.
There are several other ways you can approach this.

1) Have an image centered left, with a background color that fills in any other space
2) Have your background image set background-repeat: no repeat;

I don't really see how resizing the image will work because your image is going to be scewed.

Posted: Tue May 31, 2005 4:23 pm
by Skara
hm. I suppose the no-repeat thing will be fine. Most people have 1024 anyway. ;)

Posted: Tue May 31, 2005 6:02 pm
by pickle
I've come up against this wall a couple times. What I usually do is make an image the "background-image" of a cell, div or whatever, but make it really wide, say 1600px. That way, it will fill up the entirety of the container, no matter what the resolution (until 1600 of course).

Posted: Tue May 31, 2005 7:16 pm
by Skara
Yeah, that's what I've done. The biggest I could get the picture I took was 1100, though. :P Ah, well, surely that'll be enough.