Argh! Div background images.

manic111

manic111

manic111

Soldato
Joined
1 Jul 2007
Posts
21,898
Location
Various
I'm trying to fill the left and right divs in my layout with an image, which is large enough to show up on a 1900x1200 screen without the need for reapeating. However, I'm having problems in that, on a smaller screen, the image is not resizing with the div, and most of the picture is therefore cut off. Is there a way to get the image to resize as the browser window (and therefore div) does? I've tried playing with all manner of percentages etc, and nothing seems to work.

Here is the relevant code (only included it for the right div, the left is exactly the same!) If you need the code for the entire page just ask :) Cheers for the help!

Code: 
#right { position: relative; float: right; width: 20%; height: 75%; background-image:url(bubbles.jpg); background-repeat: no-repeat;
border:0; margin:0; padding:0; }
 
Not if you set it as a background image. What you'll need to do is put it in as an actual image (<IMG) and then just set the height of the image to 100% (but not set the width) with that layer's overflow set to hidden. As you probably also want to put content there you'll need to then have a div above that (float it and then set the z-index) with the text in.
 
How do you want the image to resize? You are trying to shoehorn a 1900px image into a smaller space without it cutting some of it off. You would have to use some scripting to achieve what you are after. Create the rules that govern how it resizes.

At least thats what I would suggest based on my understanding of what you want to do.
 
fez said:
You would have to use some scripting to achieve what you are after. Create the rules that govern how it resizes.
Click to expand...

My understanding is that the OP wants an image to fill a div no matter how large the screen resolution is. If that is correct, the method I listed will work.
 
You must log in or register to reply here.
Back
Top Bottom