www.webdeveloper.com
Results 1 to 3 of 3

Thread: Background Stop!!!

  1. #1
    Join Date
    Nov 2011
    Posts
    82

    Background Stop!!!

    Hello,
    I am trying to figure out how to stop a background image from moving when you scale a browser down. I want this image to stop when the content reaches the edge and stops. Kind of like this.... http://www.dnadarwin.org/ If you scale the browser down you will notice the content stops as well as the background image. The way I have it, the background image continues moving when the content stops. Help! Thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    If I understand what you are asking, you want to prevent your content(and content background) from shrinking when the browser window becomes smaller.

    If that is the case, this could be achieved by setting an absolute 'width' for your content area. Depending on how you want your template to react, you could also use the 'min-width' property to allow the content area to get smaller, but only to an extent(set by 'min-width').

    [EDIT]
    Also, since you mention your background seems to continue moving, this also may depend on how you have implemented your background image to the page/content. But to determine if this is the case and/or how to fix it, some example code or a link to your page/code would be needed.
    [/EDIT]
    Last edited by Sup3rkirby; 11-14-2011 at 12:06 PM.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there andy.richin,

    here is the basic example...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    body {
        margin:0;
        background-image:url('http://www.dnadarwin.org/img/paper.jpg');
        background-position:center top;
     }
    #container {
        width:900px;
        height:1200px;
        margin:auto;
        background-color:#fc9;
     }    
    </style>
    
    </head>
    <body>
    
    <div id="container"></div>
    
    </body>
    </html>
    
    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles