CSS: Automatically repeat background in a div without fixed height?

Cybertronic

Cybertronic

Cybertronic

Soldato
Joined
16 Dec 2003
Posts
2,697
I'd like to fill one of my div columns with a repeated background image (repeat-y) without having to use a fixed height. Is it possible for the background image to stop repeating at the end of the content in the div tag?

If so, how can I do this please? :)
 
Last edited:
Maybe nest another div inside and give that the background? If you nest two inside, and give one float:left; and one float:right maybe?
 
I've got my layout similar to what you've described, one div with four div columns (floats) inside it but the background on the left and right div's are different.

If the contents in the 2 inside columns (not fixed height) expand, I'd like the background images on the left and right columns to expand along with them. I hope I'm making sense :o
 
So, you have one container div, with 4 seperate divs inside which are all floated left or right?

If that's the case the only way i can think of doing it is putting together one background which fuses together both the backgrounds of the outer columns, and then place this as the background of the container div. Then do clearance div just before you end the container div. In html something like this.

Code: 
<div id="container">
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
<div id="column4"></div>
<div style="clear:both">&nbsp;</div>
</div>

Obviously this resticts the size of the page to be based on the size of the single background image, and it means the content of the outer columns won't expand with the background, if the innermost columns are bigger than the outermost columns.
 
Fx-Overlord, you've described the way I've setted up my div's :)

I didn't think of using one image as a background before :o

Is it possible for column's 1 and 4 to repeat their background images depending on the height of columns 2 and 3? I'm just wondering as my columns 1 and 4 doesn't have any contents in unlike 2 and 3.
 
You can get the backgrounds on the outer columns to repeat with the inner column content, but only if the inner column content divs are descended from the background divs your wanting to repeat. i.e the content divs have to be inside the background divs you want to repeat. For this to happen, the easiest thing would be apply the background onto your container div. However, this does mean that you will need the background to encompass both the backgrounds for your column1 and column 4 backgrounds and also take into account the width of your columns 2 and 3.

Since you say, you don't have content in columns 1 and 4, then it would be easier to just to use padding on your maincontainer div to create "faux" columns. Something like this

Code: 
div#container {
width: 500px;
margin: 0 auto;
background: red; /*insert the background image here*/
padding: 0 150px;
}
div#column1, div#column2 {
float:left;
width: 250px;
}

Code: 
<div id="container">
<div id="column1"></div>
<div id="column2"></div>
<div style="clear:both"></div.
</div>

Doing it by this method also has another disadvantage, in that, if one of your content columns become larger than the other content column then, the smaller content column will not resize to the same size as the larger content column. However, your background in the previous named, columns 1 and 4, will expand.

There are other ways to do the background repeating using two images but it becomes a little tedious...
 
I've managed to do it :o

I took out the 2 empty columns and float the remaining two in the center with a wrapper. That wrapper was then wrapped with another div containing the background image with changes height depending on the amount of content there is inside :)
 
You must log in or register to reply here.
Back
Top Bottom