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.
Resize, then stop -- max width
Moderator: General Moderators
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
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.
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.
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.