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 4 of 4
  1. #1
    Junior Member
    Join Date
    Jul 2004
    Posts
    3
    Member #
    6550
    Hello, my idea is to have one background that covers the whole page and another that runs at the bottom of the page. They cannot be made as one image because I whould like it to fit all resolutions. Another porblem is that I would like the content to be centered... so I cannot just make the bottom background as div and tell it to be 100% wide...

    All ideas how to accomplish it are welcome .. cause I have ran out of them :squareeyed:

  2.  

  3. #2
    Senior Member Riat_Sila's Avatar
    Join Date
    Oct 2003
    Location
    Berkshire, UK
    Posts
    417
    Member #
    3485
    Make the bottom background a div with its container set with the property text-align:center; and the actual div - margin:0px auto; width:100%;

    e.g

    Code:
    CSS
    
    body{
    background:url(yourimage) [etc];
    }
    
    #container{
    text-align:center;
    }
    
    #background{
    width:100%;
    margin:0 auto;
    }
    
    <html>
     <head>
      <link rel="stylesheet" type="text/css" href="CSS File" />
     </head>
     <body>
      <div id="container">
         <div id="background">
         </div>
      </div>
     </body>
    </html>

  4. #3
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    A div will naturally span the width of its container, so you do not need to specify a width, in fact doing so will screw things up.

    Put one as the background for your body, and the other create a div and positioning it absolutly, then set the bottom property to 0px as well as the left. Give that div a hight equal to the height of the image you want it to contain, and set that image as that div's background. example:

    HTML Code:
    body {
      background: url(path/to/image.gif) 0% 0%;
      margin: 0px;
      padding: 0px;
      text-align: center;
    }
    #containerdiv {
      margin: 0px auto;
      text-align: left; /*to prevent the text from being centered*/
    }
    #footerdiv {
      position: absolute;
      hight: 20px; /*set to height of image*/
      bottom: 0px;
      left: 0px;
      background: url(path/to/image2.gif) repeate-x 0% 100%;
    }
    HTML Code:
    <body>
     <div id="containerdiv">/*This is your centered content div, put all your elements inside this container*/
      Content,menus,etc..
     </div>
    <div id="footerdiv"></div>/*used only to hold the bottom image*/
    </body>


  5. #4
    Junior Member
    Join Date
    Jul 2004
    Posts
    3
    Member #
    6550
    Thank you guys...such a life savers


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
  •  
All times are GMT -6. The time now is 03:32 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com