[SOLVED] background-position: bottom left

[fanfavorite]

Hey all,

 

I am trying to figure out how to make a background image to position at the bottom of the page after scrolling.  I can position it on all browsers right at the bottom of the page before scrolling.  Here is the code I am using:

 

#container {

margin:0px auto;

height:100%;

background-image:url(images/blue/bglines.jpg');

background-position: bottom left;

background-repeat: no-repeat;

background-color: #01172b;

width:804px;

} 

 

height: 100% is also specified in the html, body { } section.   

 

The height also is dynamic, so I cannot put a specified height. 

 

Thanks.

 

-JC

[phpQuestioner]

try this:

 

background-attachment: fixed;

[fanfavorite]

Thanks, I tried that.  It only works in IE7.  What I have above works the same in all browsers, but only goes by the height of the browser.  Meaning that it starts at the bottom of the browser not the bottom of the page.  Is there any way to make to start at the very bottom of the page? 

[phpQuestioner]

Thanks, I tried that.  It only works in IE7.  What I have above works the same in all browsers, but only goes by the height of the browser.  Meaning that it starts at the bottom of the browser not the bottom of the page.  Is there any way to make to start at the very bottom of the page? 

 

actually it displays fine and accurately in: IE6, IE7, and FFv2.0.11. try my example below and you will see that the image alway continuously is at the bottom left corner of the web page.

 

<style type="text/css">

BODY {background:url('http://www.google.com/intl/en_ALL/images/logo.gif') no-repeat 0% 100%; background-attachment:fixed}

</style>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

[fanfavorite]

Thanks bud, didn't try your example yet, but found my own solution.  If I remove height: 100% and add display:table, it works on all browsers.  IE7, Safari, FF, Opera and Netscape.  I haven't tested earlier versions yet, but I am sure it will be just minor hacks if any. 

 

#container {

margin:0px auto;

display:table;

background-image:url('http://www.anothertakestudios.com/images/blue/bglines.jpg');

background-position: bottom right;

background-repeat: no-repeat;

background-color: #01172b;

width:804px;

}

 

Thanks for your help! 

[phpQuestioner]

your welcome

[bronzemonkey]

If I remove height: 100% and add display:table, it works on all browsers.

 

Unfortunately, it won't work in IE6 because display:table is not supported. Depends if you are bothered about IE6 support, and besides, you can target IE6 specifically to produce a compromise you're happy with...not always necessary to handicap your project in all browsers just because of IE6

[fanfavorite]

yeah I assumed it wouldn't work in IE6... I have a separate CSS specifically for it.  Thanks for the heads up.