code_sponge — 2011-03-14T15:33:57-04:00 — #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.
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.
samanime — 2011-03-14T16:01:44-04:00 — #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).
code_sponge — 2011-03-15T08:07:01-04:00 — #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.
What can I manipulate to get the image to tile?
paulob — 2011-03-15T13:38:48-04:00 — #4
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.
samanime — 2011-03-15T13:52:25-04:00 — #5
Also, note that you have:
so it'll only repeat horizontally, like this:
If you change it to just repeat, it'll repeat both directions:
paulob — 2011-03-15T14:20:17-04:00 — #6
Well spotted I missed that I only looked at the code in the site linked to and that had it correctly.
[B] background-repeat: repeat;[/B]