hi guys,

i am currently facing one problem whereby i have a div container with a background-image and i want the background to automatically repeat as the inner divs contents expands. However, if i do not specify any height to the container, the background does not repeat at all even though the inner divs contents are expanding.

here's what i did

#container
{
    background-image: url(...);
}

#inner
{
    top: 10px;
    left: 25px;
    position: absolute;
}

when my contents in the inner div grows, the container background does not repeat to cover, i have also tried setting the container height to auto but it doesnt work, if i set height to 100 then it repeats the background for a 100px..

please help.. my html are as follows:

<div id="container">
    <div id="inner">
        the contents are all here
    </div>
</div>
#container
{
    background-image: url(...) left top repeat;
}

try it like that, ( adjust background position and repeat behavior base on your need )
in the code above your background will repeated to x and y, use repeat-x if you want your background repeated only in x (left to right)
Or use repeat-y if you want your background repeated only in y ( top to bottom )

thanks for your reply,

however i tried background repeat but it still doesnt work..

#container{
	background-image: url("");
	background-color: White;
	background: left top repeat;
}

if i specified the height, then everything is working but i want it to be dynamic according to my contents per page..

please help..

mmm its strange ....
i think i need to see your page 1st
but u can try to add background to your body instead of #container like this

body{
	background-image: url("");
	background-color: white;
	background: center 100px repeat-y;
}

adjust the position based on your need, but its better if u show ur entire page code (url maybe)
:D

thanks for your continuous response rudevils,

however, i finally solved my problem, it was because of the positioning that i have set for my inner and container divs. my container was at relative and my inner was absolute. so i changed my container to absolute and left my inner div at default positioning (no value) and it worked.

I guess i am starting to get better understanding about css positioning. So sorry to crack your head on such a small problem but i really appreciate your help =)

Your background color is overriding the background image, because it is later in the stylesheet.

Your background color is overriding the background image, because it is later in the stylesheet.

MidiMagic, you are right. I just faced another problem not being able to repeat my background image as i really needed absolute positioning for my contents since i am not that professional a tableless website designer yet.

Then i came and revisit my post, which very luckily saw your post, and made me realized that the background color will override absolute positioning background image, really appreciate your help.

Thanks a million. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.