Menu
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;
}
340
background-position takes two arguments, an x-value and an y-value so to position it at the bottom, you would use: background-position: center bottom; . You could use this to fix your first example. Is there any reason that you cannot put the background as the background of the body or the html tag?
The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
Preload background image Whether you're using a background image or IMG tag if the image is in the above fold, preload that image. Preloading tells the browser to download that image on high priority.
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;
}
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
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
