image stretching per resolution

B

b1m2x3

2[H]4U
Joined
Mar 19, 2002
Messages
2,678
Hey guys, my website is only optimized for 1024x768 right now, and its kinda bothering me.

using css, is there any way to get the top banner and white divider to stretch per resolution?

the website in question is www.swg3d.com

thanks
 
Yes, you can do it. Look at this site, for example; the horribly-colored stripey bar will resize to fit your window. Is that basically what you want? From looking at your site, it seems that you'd probably want it to tile instead of stretching. The basic idea would be to set up background images under the banner and the white menu bar that match up with the two where they cut off, but continue tiling once the foreground images stop.

If you just want to stretch it, that's a lot easier. The technique on that page I linked to is just to make the image have a set height in pixels (whatever the height of the source image is), and then give it width 100% in the CSS.

Does that help? I might be able to provide more details if not.
 
i just want it to stretch.... but that didnt help much.

i suck at css. haha
 
Okay, well, I guess I can still give you a few tips. First of all, since you've got the whole page in a table, that table is going to have to have width="100%", unless you want to totally redo the page without the table. The table inside that table needs 100% width, too, though I'm not sure why you have the nested tables. Then where you have the image tag for swg.gif, instead of saying:
Code: 
<img height="147" width="1003" src=img/swg.gif>
...just say:
Code: 
<img style="height: 147px; width: 100%;" src="img/swg.gif">
Something like that should work, or at least get you started in a direction that will work, even if it's not necessarily the best solution.
 
Stretching or shrinking an image via size tags basically makes it look like ass.

Your best bet would be to run a detection script and serve up a resolution-appropriate sized image if you aren't happy with serving a static size.
 
What Lethal said, although given your backgrounds, a tiled pattern would be a good arrangement, too. It's well-suited to that and saves scripting issues at the expense of more intricate images.
 
I've already suggested tiling instead of stretching, but it doesn't sound like he wants to put that much effort into it. If image quality is important to you, b1m2x3, you'll probably want to go with a technique like this. It will take some adaptation, but it will give you the basic idea. I don't think you need any kind of detection scripts or anything (or at least it doesn't seem like that would be easier than doing it with CSS, but maybe that's just my aversion to JS coming through ;)).
 
You would be much wiser to not use javascript and instead using tiling trickery. Javascript makes the web shitty for everyone.
 
you should just tile the block where the two dashes are. it would make it much easier and itll look better. it already almost looks like its tiled anyways so tiling would be the most logical route.
 
You must log in or register to reply here.
Back
Top