SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2002
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it possible to put a background image on the bottom of the page?

    Is there a way to put a background image on the bottom of the page? I'm not talking the bottom of the screen, I mean if you scroll all the way down to have the background image at the very botttom of the document.

    thanks!

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    If I understand what you mean:
    Code:
    body {
    background: url(image.gif) bottom left no-repeat;
    }
    Hope it is what you we're asking.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It depends exactly what you mean as you would simply place the background image at the bottom of the container.
    e.g.
    Code:
     background: url(img.gif) no-repeat left bottom
    That will place the image on the bottom of the container it resides in. If that parent container contains the whole page then the image will always be on the bottom. If you want it to be free of content then apply some padding bottom to the container to protect it.

    You could do a similar thing with the body.

    Code:
     body{
     	background: url(img.gif) no-repeat left bottom;	
      padding-bottom:150px;/* height of image*/
     }
    I'm not sure if that's what you meant

    Edit:


    too slow....

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2002
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This didnt seem to work. I have the 100% height table hack, so my body table is 100%. I havent found a way to make the body of the page have a background that stays at the bottom of the page, not the screen. If I add an object, like a div or another table and apply the background image to the bottom of that, it works, but then my 100% body table doesnt work in IE because it is now inside of something.

    Hmm...

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have the 100% height table hack, so my body table is 100%.
    You are going to have to show us what you have got ?

    At the simplest level it would look something like this.
    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    /* mac hide \*/
    html,body{height:100%}
    /* end hide*/
    html,body{margin:0;padding:0}
    table{
    	height:100%;
    	width:100%;
    	table-layout:fixed;
    	background: url(img.gif) no-repeat left bottom;
    }
    td#main{vertical-align:top;padding-bottom:100px;}
    </style>
    </head>
    <body>
    <table cellpadding="0" cellspacing="0">
    	<tr>
    		<td id="main"><p>Page content goes here</p>
    			<p>Page content goes here</p>
    			<p>Page content goes here</p></td>
    	</tr>
    </table>
    </body>
    </html>


Bookmarks

Posting Permissions

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