Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Sep 2009
    Posts
    5
    Member #
    19842
    I'm designing a site and I'm having trouble getting a background image to stick to the sides. Here's what I'm talking about:

    http://img7.imageshack.us/img7/7623/75879501.jpg

    As you can see, the blue area doesn't quite reach the ends of the browser window and some brown from the body bg still shows. How do I get it so the blue stretches to the sides?

    Here's my HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1"
    http-equiv="content-type">
    <title>BioGreen Energies - Home</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
    <div id="container">
    <div id="header"><img src="images/header.png">
    </div>
    <div id="content">
    <h1>Test</h1>
    This is content
    </div>
    </div>
    </body>

    And my CSS:

    body {
    background:#663300;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    color:#FFFFFF;
    }

    #container {
    background:#663300;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    }

    #header {
    background-image:url('images/headerbg.jpg');
    background-repeat:repeat-x;
    width:100%;
    height:160px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    }

    #content {
    padding:10px;
    width:800px;
    margin-left:0px;
    }

    Can anyone help?

  2.  

  3. #2
    Senior Member jyuill's Avatar
    Join Date
    Jan 2009
    Location
    California
    Posts
    145
    Member #
    18049
    Try adding padding:0; margin:0; to your CSS, either in the body selector or using the * selector (I personally use the * selector). If you don't use a massive reset, 0 margins and padding is the minimum you should do to ensure your site will look the same in all browsers.
    Semantic, Valid, and Accessible Design!


  4. #3
    Junior Member
    Join Date
    Sep 2009
    Posts
    5
    Member #
    19842
    Tried that. No luck :-/

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    body {
    margin:0px auto;
    background:#663300;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    color:#FFFFFF;
    text-align:center;
    }

    #container {
    background:#663300;
    width:800px;
    text-align:left;
    }

    #header {
    background-image:url('images/headerbg.jpg') repeat-x;
    width:800px;
    height:160px;
    text-align:center;
    }

    #content {
    background-color:transparent;
    padding:10px;
    width:800px;
    }


  6. #5
    Junior Member
    Join Date
    Sep 2009
    Posts
    5
    Member #
    19842
    Hmm, I put in the code but the bg image dissapeared and the header moved to the left.

  7. #6
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    start your css with

    * { margin: 0px; padding: 0px; }

    1. the container must be positioned relative.

    2. the header must be absolute.

    3. text align must be given to the tag associated with the text in question, not the element containing the text.

    4. always declare position from top when giving position.

    #header {
    position: absolute;
    top: 0px;
    width:100%;
    height:160px;
    background-image:url('images/headerbg.jpg') repeat-x;
    }

    while($get_it !== true){ continue; }


Remove Ads

Posting Permissions

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

Search tags for this page

stick images to backgrounds

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:36 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com