SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: positioning of background image
Hybrid View
-
Sep 12, 2007, 06:47 #1
- Join Date
- Feb 2006
- Location
- North Carolina
- Posts
- 288
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
positioning of background image
I am attempting to layer three images in the following html:
HTML Code:<body> <div id="wrapper"> <div id="content"> <div id="header"> </div><!--end header--> </div><!--end content--> </div><!--end wrapper--> </body>
Code:#wrapper { position:relative; background-image:url(images/background.png); background-repeat:repeat; width:800px; padding-top:25px; margin-left:auto; margin-right:auto; } #content{ background-image:url(images/largewhitebackground.png); background-repeat:no-repeat; background-position:top center; margin:0; padding-top:10px; height:1200px; } #header { background-image:url(images/logo.png); background-repeat:no-repeat; height:160px; background-position:left; margin-left:100px; margin-top:-15px; }
Any ideas?
Thanks,
Dan
-
Sep 12, 2007, 07:07 #2
- Join Date
- Oct 2003
- Location
- Winona, MN USA
- Posts
- 10,053
- Mentioned
- 142 Post(s)
- Tagged
- 2 Thread(s)
Can you leave a url so people can see what you are trying to accomplish and what is going wrong for you?
A few things that are odd to me are:
1. Why are you using a white background image when you could more easily declare a background-color: #ffffff ?
2. Do you really want your logo inside your white content block?
3. Relative positioning is positioning relative to the parent element. Are you positioning your wrapper relative to the body of your document?
I know none of my questions answer yours, that's why I asked about the url.Linda Jenkinson
"Say what you mean. Mean what you say. But don't say it mean." ~Unknown
-
Sep 12, 2007, 09:17 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
We'll need to see a real page because the code is working as I would expect and if I change the images to colours then they all line up where I expect, except that the header is 100px from the left because of the margin you added.
-
Sep 14, 2007, 11:01 #4
- Join Date
- Feb 2006
- Location
- North Carolina
- Posts
- 288
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I actually found out what I was doing wrong on this. If the ';' is not added the CSS sheet does not display properly. Sorry to bother with the post but thanks for the replies.
Dan
Bookmarks