How to keep background image on bottom left even scrolling....

Question

Hello. I was wondering if there is a way to keep my background image on bottom left all the time even if the user scroll the browser. My current css can make the image in the bottom of the browser when the site loaded, but if I scroll the browser, it will still stay in the same location. I appreciate any help.

html, body 
{
background-image:url("backgroundBottom.png");
background-position:bottom left;
background-repeat:no-repeat;
background-attachement:fixed;   //I just add this, don't think this would work.
font-family:"Georgia, self";
font-size:"30px";
margin:0px;
height:100%;
text-align:center;
}

Answer 1

if it is a fixed image with no repeat, I would recommend putting it in it's own div tag that is exactly the same width and height as the image.

<div id="BackgroundImage"></div>

Then use the following CSS

#BackgroundImage{position: fixed; width="xx"; height="yy"; bottom:0px; left:0px;}

obviously customized to your needs

The main point is position:fixed

Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

http://www.w3schools.com/Css/pr_class_position.asp

Answer 2

You're setting the background on both the HTML & BODY elements.

The code looks good, background-attachment: fixed is what you need.

So in shorthand CSS, just write

body {
    bacgkround: url(backgroundBottom.png) bottom left no-repeat fixed;
}