SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict hurricanedan's Avatar
    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>
    I have the following css to position the images:

    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;
    }
    I am not having any issue with the images in wrapper and content lining up correctly but the header image is aligning left to the wrapper (that is why I have the margin left and margin top) I would prefer it align to the left side of the content though.

    Any ideas?

    Thanks,
    Dan

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 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.

  4. #4
    SitePoint Addict hurricanedan's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •