后台重复不起作用

Question

I have one div :

fiddle for my problem.

HTML :

 <div class="listinggitems">
 </div>

CSS :

.listinggitems
{
    min-height:280px;
    width:785px;    
    background: url(images/bgdoodle.png);
    background-repeat:repeat-xy;
    position:relative;
    margin-left:210px;
    margin-top:20px;
}

Upto 280px height, background display but when div size automatically increase as data in it increase the background image doesn't increase. I also tried background-repeat:repeat-xy; but it also display background upto 280px after that it doesn't display it. when manually I increase height of div then background increase. I have to load dynamic data into that div so I have to use min-height .

Any suggestion ???

Answer 1

in your HTML ammend last 3 line's to :

            </div>
               <div class="clr"></div> 
            </div>

in CSS add :

.clr{clear:both}

Why its happening?? You are setting the child-divs to float which means that the container div (listinggitems) cannot work out it's actual height. You need to clear the floated element which essentially lets the container know how large the image actualy is.

That's why u'll need to add an element with the style clear: both;

Answer 2

Your background-repeat property declaration ie background-repeat:repeat-xy; is incorrect.

Either use background-repeat:repeat-x; or background-repeat:repeat-y; or background-repeat:repeat; to repeat.

Check the below for a complete list of Background repeat attributes.

Link for CSS Background-repeat

Answer 3

try this one,

.listinggitems
{
    min-height:280px;
    width:785px;    
    background-image:url(images/bgdoodle.png);
    background-repeat:repeat;
    position:relative;
    margin-left:210px;
    margin-top:20px;
}

http://jsfiddle.net/Hvqww/

Answer 4

If you change to

background-repeat:repeat; 

it's working fine, even if the height increases:

JSFiddle