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 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2006
    Location
    Oz
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Background positioning

    I have searched and cannot find anything that helps me out so here goes...

    I want to be able to position my background so that it does not appear at the top of the page. What I mean is that the top say 10% is blank and the background starts and runs all the way down. The background I am using is a image and is repeated.

    What I have is a page that has a number of images on it, when you click on that image, the background changes, the content stays the same. I want the background though not to appear at the top part.

    When you click on the image, another page opens with the relevant image background in that html page. Here is some of the coding:

    css:

    #body {
    margin:10px 10px 0px 10px;
    padding:10px;
    }

    html:

    <body background="craters.jpg">


    <div id="banner1">


    <img src="evolve.gif">

    </div>

    <div id="banner2">

    <img src="banner6.gif" height="120px" width="815px">

    </div>

    So when you click on the "craters" image, the page will change to the relevant background. I am not sure how do this in css. Would be good if I could. it is driving me crazy so thanks for your help...

    John
    "This is not Vietnam, there ARE rules" Walter

    Are you a Top Bloke? Take the quiz to find out!! www.topblokeday.com

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there JohnL,

    you will find the methods of background-position here...
    coothead

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by JohnL View Post
    I want to be able to position my background so that it does not appear at the top of the page. What I mean is that the top say 10% is blank and the background starts and runs all the way down. The background I am using is a image and is repeated.

    … I want the background though not to appear at the top part.
    Due to the way that HTML works, you can’t do this when assigning a background to the body element. I would create a container element that contains your entire page and assign the background image to that. Then you can assign a top margin to that element so that the background doesn’t appear on the top portion of the page. Example:

    Code:
    HTML:
    <body>
      <div id="container">
        
      </div>
    </body>
    
    CSS:
    div#container {
      margin-top: 150px; /* “the top say 10% is blank” */
      background-image: url("craters.jpg");
      }
    Quote Originally Posted by JohnL View Post
    When you click on the image, another page opens with the relevant image background in that html page. …

    So when you click on the "craters" image, the page will change to the relevant background. I am not sure how do this in css. Would be good if I could.
    Such a dynamic effect is not possible via CSS. You would probably want to turn to JavaScript for that.

    Other notes:
    • #body sets properties on an element with the ID of “body”. I’m guessing that you meant to simply target the element named body; in that case, the number sign (#) should be removed.
    • A shorter way of writing margin: 10px 10px 0px 10px is margin: 10px 10px 0. The way I demonstrated sets the margins for the top, left and right, and bottom sides, respectively. Also, units are not required for values of zero.
    • The background attribute is deprecated (obsolete). Use the CSS background-image or background properties instead.
    • Image (img) elements require an alt attribute, which specifies alternative text to display should the image fail to load.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New Coder
    Join Date
    Feb 2006
    Location
    Oz
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you both for your help.
    "This is not Vietnam, there ARE rules" Walter

    Are you a Top Bloke? Take the quiz to find out!! www.topblokeday.com

  • #5
    New Coder
    Join Date
    Feb 2006
    Location
    Oz
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you both for your help.
    "This is not Vietnam, there ARE rules" Walter

    Are you a Top Bloke? Take the quiz to find out!! www.topblokeday.com


  •  

    Posting Permissions

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