HTML and CSS

div repeat background problem

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Feb 2006

Posts: 8

Reputation: suchiate is an unknown quantity at this point

Solved Threads: 0

suchiate

Offline

Newbie Poster

div repeat background problem

May 2nd, 2008

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

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div id="container">
    <div id="inner">
        the contents are all here
    </div>
</div>
<div id="container">
    <div id="inner">
        the contents are all here
    </div>
</div>

•

Join Date: Jan 2008

Posts: 79

Reputation: rudevils is an unknown quantity at this point

Solved Threads: 9

rudevils

Offline

Junior Poster in Training

Re: div repeat background problem

May 4th, 2008

Help with Code Tags

(Toggle Plain Text)

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

If love is blind, why there's a bikini ??

Post your article at Bali Side Notes share your knowledge

•

Join Date: Feb 2006

Posts: 8

Reputation: suchiate is an unknown quantity at this point

Solved Threads: 0

suchiate

Offline

Newbie Poster

Re: div repeat background problem

May 6th, 2008

thanks for your reply,

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

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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

Last edited by suchiate; May 7th, 2008 at 12:00 am.

•

Join Date: Jan 2008

Posts: 79

Reputation: rudevils is an unknown quantity at this point

Solved Threads: 9

rudevils

Offline

Junior Poster in Training

Re: div repeat background problem

May 7th, 2008

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

Help with Code Tags

(Toggle Plain Text)

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)

If love is blind, why there's a bikini ??

Post your article at Bali Side Notes share your knowledge

•

Join Date: Feb 2006

Posts: 8

Reputation: suchiate is an unknown quantity at this point

Solved Threads: 0

suchiate

Offline

Newbie Poster

Re: div repeat background problem

May 8th, 2008

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

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: div repeat background problem

May 9th, 2008

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

Daylight-saving time uses more gasoline

•

Join Date: Feb 2006

Posts: 8

Reputation: suchiate is an unknown quantity at this point

Solved Threads: 0

suchiate

Offline

Newbie Poster

Re: div repeat background problem

May 15th, 2008

•

Originally Posted by MidiMagic

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.