•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 332,643 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,309 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 370 | Replies: 6 | Solved
![]() |
•
•
Join Date: Feb 2006
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
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
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:
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>•
•
Join Date: Jan 2008
Location: Bali - Indonesia
Posts: 60
Reputation:
Rep Power: 1
Solved Threads: 6
#container
{
background-image: url(...) left top repeat;
}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
Download punk mp3 for free | Download Classic Rock mp3 for free
Post your article at Bali Side Notes share your knowledge
Download punk mp3 for free | Download Classic Rock mp3 for free
•
•
Join Date: Feb 2006
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
thanks for your reply,
however i tried background repeat but it still doesnt work..
if i specified the height, then everything is working but i want it to be dynamic according to my contents per page..
please help..
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..
Last edited by suchiate : 10 Days Ago at 11:00 pm.
•
•
Join Date: Jan 2008
Location: Bali - Indonesia
Posts: 60
Reputation:
Rep Power: 1
Solved Threads: 6
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
adjust the position based on your need, but its better if u show ur entire page code (url maybe)
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
Download punk mp3 for free | Download Classic Rock mp3 for free
Post your article at Bali Side Notes share your knowledge
Download punk mp3 for free | Download Classic Rock mp3 for free
•
•
Join Date: Feb 2006
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
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 =)
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: Feb 2006
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
•
•
•
•
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 : 2 Days Ago at 12:09 am.
![]() |
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Similar Threads
- Firefox background-position problem solved (JavaScript / DHTML / AJAX)
- Child div's (faux columns) showing irregularly in FF (HTML and CSS)
- In navigation display:block; property is giving problem in IE6 (HTML and CSS)
- Placing one div within another (HTML and CSS)
- mac vs windows; help to resolve the problem (HTML and CSS)
- Background question (JavaScript / DHTML / AJAX)
- Bizarre CSS Behavior in Moz Without Border on Div (HTML and CSS)
- CSS browser compatibility ??? (HTML and CSS)
- Desktop background hijacked-NEW Problem (Web Browsers)
- Desktop Background Hijacked-NEW Problem(! Smart Security) (Viruses, Spyware and other Nasties)
Other Threads in the HTML and CSS Forum
- Previous Thread: what's the best css books?
- Next Thread: How to make this layout using tableless Divs



Linear Mode