Div container and background-image not working

HTML & CSS
1

I have been working with css for a year now. Just when I think I have it, something happens that is illogical to the way I perceive css. I took over a site half fiished, developed in Dreamweafer. I am trying to finish converting the structure from tables to div’s. I wrapped a div Content, around the other div’s in order to display a background image. I can’t make it work, despite research and Rachel’s excellent book. The image the designer wants is 898px by 443px tall. I need it to repeat down as the content flows beyond 443px.

Here is css for the container. I have a red rule in there for verification of the container.

Content {
width: 898px;
float: left;
height: 0px;
background-image: url(media/background-main.gif);
background-repeat: repeat-x;
border: 1 px solid red;
}

URL to dev page: BEAVERDAM BUILDERS

Sample page of the layout trying to be achieved: BEAVERDAM BUILDERS

Thank you in advanced. Still need to finish the header table conversion to css and div’s.

CS

2

Why “height: 0px”? That’s going to make it scrunch up into nothing.

I think what you want is “height: auto” (or just remove the height property altogether).

3

Image drops in. Thanks. But it stops short of the text on the page and the footer. The image size is 898 x 443. How do I get it to tile down automatically? Border didn’t work either, I guess because there was no defined height. I took it out because it was just for reference.

Content {
width: 898px;
float: left;
background-image: url(media/background-main.gif);
background-repeat: repeat-x;
}

What can I manipulate to get the image to tile?

BEAVERDAM BUILDERS

CS

4

Hi,

The image is repeating as far as I can see. It goes all the way to the footer.

It won’t repeat seamlessly because your image is not symmetrical and so will just tile.

5

Also, note that you have:
background-repeat: repeat-x;
so it’ll only repeat horizontally, like this:

If you change it to just repeat, it’ll repeat both directions:

6

Well spotted I missed that :slight_smile: I only looked at the code in the site linked to and that had it correctly.


#content_subnav {
  background-image: url("media/background-main.gif");
 [B] background-repeat: repeat;[/B]
  float: left;
  width: 898px;
}