div repeat background problem

[suchiate]

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>

[rudevils]

#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 )

[suchiate]

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

[rudevils]

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

[suchiate]

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 =)

[MidiMagic]

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

[suchiate]

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. :)