CODEWITHSUNDEEP
csspositionbackground-image
FlyingCat
FlyingCat

Reputation: 14250

How to keep background image on bottom left even scrolling

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;
}

Upvotes: 11

Views: 44937

Answers (3)

Dan
Dan

Reputation: 21

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

try spelling it better like background-attachment:fixed;

Upvotes: 1

Marko
Marko

Reputation: 72222

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;
}

Upvotes: 22

Chase Florell
Chase Florell

Reputation: 47377

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

Upvotes: 3

Related Questions