Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    WebPage with multiple background images

    Hello,

    I'm trying to apply different background images to 3 divs in my page : #header , #container and #footer. I also want to have my page centered, with a maximum width of 900 px. Here is an image that explains this :


    (each color represents a background image)

    I'm having some difficulties : when I set the maximum width in my stylesheet like this : body { max-width:900px; } , the background image applied to the divs don't fill all the width, I have something like this :


    Can someone help me ?

  • #2
    Regular Coder
    Join Date
    Jan 2010
    Posts
    127
    Thanks
    9
    Thanked 0 Times in 0 Posts
    The CSS part:
    Code:
    body, html {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #ff0000;
    }
    #container {
    	margin: 0px auto;
    	padding: 0px;
    	width: 900px;
    }
    #header {
    	background-image:url('image_url_here');
    }
    #content {
            background-image:url('image_url_here');
    }
    #footer {
    	background-image:url('image_url_here');
    }
    The HTML Part:
    Code:
    <div id="container">
      <div id="header">
      Header Here</div>
        <div id="content">
        Content Here</div>
      <div id="footer">
      Footer Here</div>
    </div>


  •  

    Tags for this Thread

    Posting Permissions

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