Geek Answers Handbook

Saving background image below


I worked with a solution for storing images on the bottom page. The code I got currently:

.footer { background-image: url('images/footer.png'); background-repeat: repeat-x; position: absolute; height: 950px; width: 100%; z-index: -101; bottom: 0; }

However, this has problems. What I intend is a background that sticks to the bottom and is displayed behind everything else (hence the low z index). I have the following code for the top (there is middle, just the color of the block and just added to the body):

 .background { position: absolute; top: 0; width: 100%; height: 600px; background-image: url('images/sky.png'); background-position: center; background-repeat: repeat-x; z-index: -100; }

Please note: the first part does not work (it is not at the bottom), but the second part (at the top).
If you want to visit the site, do not hesitate: www.duffydesigns.co.uk/brough (Please do not judge, this is a work in progress, nothing is really finished!).
Thanks for the help,
Joseph Duffy
Note. As I am sure, you can understand, the upper part is the sky, below - grass and trees.

+7
source share
5 answers

background-position takes two arguments, the value of x and the value of y, so to position it at the bottom, you should use: background-position: center bottom; . You can use this to fix your first example.

Is there a reason why the background cannot be placed as the background of the body or html tag? I do not think this is officially permitted behind the html tag, but I have never seen a browser where it does not work (not yet ...).

+15
source

If you want the background image to appear at the bottom of the page, you can use:

 body { background-image: url(...); background-position: center bottom; background-repeat: no-repeat; }
+1
source

Do it

 <div class="background"></div> .background { width:100%; height:90px; background:transparent url(...) repeat-x 0 0; position:fixed; bottom:0; }

Check out the working example http://jsfiddle.net/YGXxT/

+1
source

If you want it to appear at the very bottom at all times (pages, not in a window), use something like this, paste it in an html file to see it at work, change the height of .test to show that it will remain at the bottom of the screen when the window does not scroll, but move on when this happens.

 <html> <head> <style type="text/css"> html, body{ height:100%; margin:0; } #content{ min-height:100%; position:relative; } #footer{ background:green; width:100%; height:150px; margin-top:-150px; display:block; } .test{ background:blue; width:400px; height:2000px; opacity:.7; color:#fff; padding:20px; } </style> </head> <body> <div id="content"> <h1>This is a page.</h1> <div class="test">this shows that things appear in front of the bg</div> </div> <div id="footer"></div> </body> </html>
+1
source

Add min-height: 100% instead of height: 950px , which will give your div the required height. Secondly, use position:fixed to lock the background image in one place (to scroll).

0
source

More articles:


All Articles