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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning background image at absolute bottom.

    Hi.
    So i'm building a pretty basic site for my sister. I have a image of a light gradient which i repeat horizontally. it's white at the top and about 500 px tall. My plan was to have it repeat along the bottom of my site, the empty space above it white. I positioned my background image like so in my CSS.


    Code:
    body {
    	line-height: 1;
    	background-image:url('images/background.jpg');
    	background-repeat:repeat-x;
    	background-position:bottom; 
    }
    This does not work, instead of putting the image at the absolute bottom of the page, it goes to the bottom of where my content is, which means people with different resolutions will see a big gap beneath it.

    other info, i'm using a reset see below, do i need to change something in this to make it work?

    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    }
    body {
    	line-height: 1;
    	background-image:url('images/background.jpg');
    	background-repeat:repeat-x;
    	background-position:bottom; 
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    
    /* remember to define focus styles! */
    :focus {
    	outline: 0;
    }
    
    /* remember to highlight inserts somehow! */
    ins {
    	text-decoration: none;
    }
    del {
    	text-decoration: line-through;
    }
    
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    Thanks in advance
    Last edited by henrycooke; 01-03-2010 at 10:37 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    I don’t particularly like these default reset styles (and I also remember reading that they shouldn’t be used in their default state in every case as you might not want all styles reverted) but anyway: The body element actually is just an element like any other HTML element. It is a little special but basically it adapts to the content just as divisions or any element.
    I’ve read somewhere a long time ago that the correct way in XHTML to specify a page background is to apply bg color and/or image to the html element, not to the body (as the body doesn’t automatically take 100% height).

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion, do you mean like this though?
    Code:
    html {
    background-image:url('images/background.jpg');
    	background-repeat:repeat-x;
    	background-position:0%0%;
    	}
    Because that doesn't seem to work :[.

    I have already tweaked the reset a little and have tried this without it, still seems to screw up.

    Would placing an absolute positioned footer work?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Please give us your entire code (or a link) to determine the best approach.

  • #5
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, here is entire code, thank you so much if you sift through it.

    index

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Laura Nada Cooke</title>
      <link href="web.css" rel="stylesheet" type="text/css" media="screen" />  
    </head>
    
    <body>
      <div id="container">
        <div class="header">
    	<img src="images\header.jpg">
        </div>
        <div class="menu">
    	<img src="images\block.jpg">
          <a class="menulink" href="#">HOME</a>
          <a class="menulink" href="#">PORTFOLIO</a>
          <a class="menulink" href="#">CV</a>
          <a class="menulink" href="#">CONTACT</a>
        </div>
        <div class="content">THIS IS CONTENT
        </div>
     <div id="footer">s
      </div>
      </div> 
       
    </body>
    </html>
    CSS

    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    }
    
    body {
    	line-height: 1;
    	
    }
    html {
    background-image:url('images/background.jpg');
    	background-repeat:repeat-x;
    	background-position:0%0%;
    	}
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    
    /* remember to define focus styles! */
    :focus {
    	outline: 0;
    }
    
    /* remember to highlight inserts somehow! */
    ins {
    	text-decoration: none;
    }
    del {
    	text-decoration: line-through;
    }
    
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    .header {
    border: 1px solid #484848;
    width: 960px;
    }
    
    .menu {
    border: 1px solid #484848;
    width: 960px;
    background-color: #484848;
    text-align: right;
    }
    
    #container {
    width: 960px;  
    margin: 0 auto;
    margin-top: 20px;
    
    }
    #footer  
    {
         color: #f0c;
         font-size: 9px;
         font-family: Verdana, Geneva, Arial, sans-serif;
         text-align: center;
         position: absolute;
         bottom: 0px;
         left: 0px;
         width: 100%;
         height: 18px
         }

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Well, OK, you also need to set the height of the html element to 100% explicitly. That was the next guess I would have taken.
    I’d recommend to use the shortcut:

    Code:
    html {
    	background: white url(images/background.jpg) bottom left repeat-x;
    	height: 100%;
    }
    And if you just have a simple gradient then I’d suggest you make it a PNG (24 bit). That’s better quality

  • #7
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you so much, works perfectly.


  •  

    Posting Permissions

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