SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    help centering header's bg image

    Hello,
    I am hoping someone can help me find a coding solution to this problem. I have a header with a navigation inside. The header is 985 pixels in width and and that is to fit the width of the navigation, which is 982px.
    I have a background for my header, which is only 639px. I was wondering if there is a coding solution to get the background image of my header centred.
    When I apply padding on the header it shifts everything to the left becuase the header contains everything in this example.

    Here is the code of the area that I am talking about:
    Code HTML4Strict:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     
    <style>
    header{
    	background:url(headerBg.png) no-repeat 0 0 #F00;
    	position:relative;
    	width:985px;
    	height:194px;
    	margin:0px auto 0px auto;
    	overflow:hidden;
    }
     
    nav ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    margin-top:124px;
    text-decoration:none;
    width:982px;
    height:38px;
    background:#000;
    }
     
    nav ul li { display: inline; }
     
    nav ul li a
    {
    text-decoration: none;
    color: #fff;
    background-color:#CCC;
    }
     
    nav ul li a:hover
    {
    background-color:#666;
    }
     
    </style>
    </head>
    <body>
    <header>
    		<nav>
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">About</a></li> 
    				<li><a href="#">Art</a></li> 
    				<li><a href="#">Blog</a></li> 
    				<li><a href="#">Games</a></li> 
    				<li><a href="#">Media</a></li>
    				<li><a href="#">Music</a></li>
    				<li><a href="#">Store</a></li>
    				<li><a href="#">Contact</a></li> 
    			</ul>
        	</nav>
        </header>
    </body>
    </html>

    And this is it online:http://bit.ly/bwpRPX

    This is a screenshot of what it looks like now: http://bit.ly/cgoXid
    And a second of what I want it to look like:
    http://bit.ly/cVJJbC

    I have an actual site with an actual design. I am just wire-framing and trying to position things properly. My header background image is of the same width (639px) and the container which it is in is 985px because it hold the navigation that I have sketched which will be 982 pixels.

    I hope you guys can help me

    Thanks in Advance & Best Regards,
    Team 1504

    P.S. Is it possible to centre a background image using css when the width of the element it is the background of is bigger than said background?
    Or do I have to add padding by extending the canvas size and then exporting the image into a png? However that is a graphical solution, is it possible that there is a coding/solution?

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You should be able to center it by using left 50%

    background:url(headerBg.png) no-repeat 50% 0 #F00;

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you rayzur that did work. I don't know why I did not think of that. At first my headerBg kept on disappearing but that was because I was doing 50% 0% 0%

    Hopefully this short-lived thread will last a reference for anyone else needing help

    Thanks again,
    Team 1504.


Tags for this Thread

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
  •