CODEWITHSUNDEEP
cssbackground-imagerepeat
Java Curious ღ
Java Curious ღ

Reputation: 3692

background-repeat is not working

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 ???

Upvotes: 0

Views: 2631

Answers (4)

NoobEditor
NoobEditor

Reputation: 15881

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;

Upvotes: 1

radha
radha

Reputation: 782

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/

Upvotes: 0

mahega
mahega

Reputation: 3311

If you change to 

background-repeat:repeat;

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

JSFiddle

Upvotes: 0

Nitesh
Nitesh

Reputation: 15749

Your background-repeat property declaration i.e 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

Upvotes: 0

Related Questions