Resize, then stop -- max width

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Skara
Forum Regular
Posts: 703
Joined: Sat Mar 12, 2005 7:13 pm
Location: US

Resize, then stop -- max width

Post 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.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post 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.
User avatar
Skara
Forum Regular
Posts: 703
Joined: Sat Mar 12, 2005 7:13 pm
Location: US

Post by Skara »

hm. I suppose the no-repeat thing will be fine. Most people have 1024 anyway. ;)
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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).
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Skara
Forum Regular
Posts: 703
Joined: Sat Mar 12, 2005 7:13 pm
Location: US

Post 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.
Post Reply