Click to See Complete Forum and Search --> : Background not repeating


Dali
12-15-2007, 04:52 PM
I've been staring at the lines for few hours now and don't find what's wrong with the code. I have a div container with a background gif, which is supposed to be repeated, but is repeats only 3 times and then stops. Can't figure out why, and css is fairly new to me, so any help is appreciated.
The div is empty, with the code
<div class="shadow">&nbsp;</div>, the css for it
.shadow {
width: 6px;
float: left;
margin:0;
background: #c7c9b1 url(../pix/6x5px_shadow.gif);}
The main div, containing the background one, has the css:
.main {
margin-right: auto;
margin-left: auto;
width: 950px;}
The purpose of the .shadow div is just to fill it with the repeating background gif, to set a vertical shadow along the left menu container(which is also wrapped in the .main one). All the divs in the .main one are left floated.

WebJoel
12-15-2007, 06:02 PM
background: #c7c9b1 url(../pix/6x5px_shadow.gif) repeat;}

Dali
12-15-2007, 06:29 PM
Tried that, tried having the background-repeat sepapately also, tried having the background directly in the html also.

WebJoel
12-15-2007, 06:53 PM
Post your entire code. Something isn't right and I don't want to try to reconstruct your layout from the snippets you provided. :)

You'll need to either attach the background image & upload, or provide an absolute-path to it, for testing.

Centauri
12-15-2007, 07:51 PM
If the .shadow div has no actual content, it will have no height (except in IE where it will be the height required for text, even if there is no text), therefore the repeating background will be cut off at that height.

Trying to stick a vertical div for a background shadow like this is table-layout thinking... Best to apply the shadow as a background to .main (ensuring .main is cleared to suuround the floated contents), along with left padding to prevent the contents from overlapping the shadow.

Dali
12-16-2007, 09:49 AM
Thank you, Centauri. You're right, the thinking wasn't very good. Now i've solved it like this: I set the background on the menu container instead (wanted the shadow by it anyway) with the css:
background: #caccb6 url(../bilder/6x5px_shadow.gif) repeat-y top right;
Is that correct? works in IE and FF but using positioning for a background (top right) is the first time for me, so i get insecure.

Centauri
12-16-2007, 09:55 AM
Yes, that syntax is correct. As long as the menu container is as high as you want the shadow, then that should be fne.