div repeat background problem

Thread Solved

Join Date: Feb 2006
Posts: 8
Reputation: suchiate is an unknown quantity at this point 
Solved Threads: 0
suchiate suchiate is offline Offline
Newbie Poster

div repeat background problem

 
0
  #1
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

HTML and CSS Syntax (Toggle Plain Text)
  1. #container
  2. {
  3. background-image: url(...);
  4. }
  5.  
  6. #inner
  7. {
  8. top: 10px;
  9. left: 25px;
  10. position: absolute;
  11. }

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:

HTML and CSS Syntax (Toggle Plain Text)
  1. <div id="container">
  2. <div id="inner">
  3. the contents are all here
  4. </div>
  5. </div>
Reply With Quote Quick reply to this message  
Join Date: Jan 2008
Posts: 79
Reputation: rudevils is an unknown quantity at this point 
Solved Threads: 9
rudevils rudevils is offline Offline
Junior Poster in Training

Re: div repeat background problem

 
0
  #2
May 4th, 2008
#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
Reply With Quote Quick reply to this message  
Join Date: Feb 2006
Posts: 8
Reputation: suchiate is an unknown quantity at this point 
Solved Threads: 0
suchiate suchiate is offline Offline
Newbie Poster

Re: div repeat background problem

 
0
  #3
May 6th, 2008
thanks for your reply,

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

HTML and CSS Syntax (Toggle Plain Text)
  1. #container{
  2. background-image: url("");
  3. background-color: White;
  4. background: left top repeat;
  5. }

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.
Reply With Quote Quick reply to this message  
Join Date: Jan 2008
Posts: 79
Reputation: rudevils is an unknown quantity at this point 
Solved Threads: 9
rudevils rudevils is offline Offline
Junior Poster in Training

Re: div repeat background problem

 
0
  #4
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
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
Reply With Quote Quick reply to this message  
Join Date: Feb 2006
Posts: 8
Reputation: suchiate is an unknown quantity at this point 
Solved Threads: 0
suchiate suchiate is offline Offline
Newbie Poster

Re: div repeat background problem

 
0
  #5
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 =)
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,203
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: div repeat background problem

 
0
  #6
May 9th, 2008
Your background color is overriding the background image, because it is later in the stylesheet.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Feb 2006
Posts: 8
Reputation: suchiate is an unknown quantity at this point 
Solved Threads: 0
suchiate suchiate is offline Offline
Newbie Poster

Re: div repeat background problem

 
0
  #7
May 15th, 2008
Originally Posted by MidiMagic View Post
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.
Last edited by suchiate; May 15th, 2008 at 1:09 am.
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:


Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC