11

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;
}
FlyingCat
  • 14,036
  • 36
  • 119
  • 198

3 Answers3

22

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 {
    background: url(backgroundBottom.png) bottom left no-repeat fixed;
}
Prisoner
  • 27,391
  • 11
  • 73
  • 102
Marko
  • 71,361
  • 28
  • 124
  • 158
3

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

Chase Florell
  • 46,378
  • 57
  • 186
  • 376
  • Erm, if he adds that to the html/body element, very funny things will happen. – Marko Jul 14 '10 at 03:44
  • It's easier to just use `background-attachment` on the body rather than messing with weirdly positioned elements. Not to mention that fixed position has been reported to not work properly in IE. – animuson Jul 14 '10 at 03:47
1

you used background-attach*e*ment:fixed;

try spelling it better like background-attachment:fixed;

Dan
  • 21
  • 1