I've seen this trick on many websites and I want to make it for a project of my own.
I have an image background.jpg that is VERY BIG, just to be ready for any screen size.
I wish to center the background image to the visitor's window.
I mean, while scrolling the window content will move but the background will stay in place - centered vertically and horizontally.
BTW most of the viewers will have old crappy PC's so it'd better not flicker, if it'll be JS.
I've seen this trick on many websites and I want to make it for a project of my own.
I have an image background.jpg that is VERY BIG, just to be ready for any screen size.
I wish to center the background image to the visitor's window.
I mean, while scrolling the window content will move but the background will stay in place - centered vertically and horizontally.
BTW most of the viewers will have old crappy PC's so it'd better not flicker, if it'll be JS.
Share Improve this question asked Mar 28, 2011 at 14:12 VercasVercas 9,16115 gold badges69 silver badges107 bronze badges3 Answers
Reset to default 9body
{
background-image: url('background.jpg');
background-repeat: no-repeat; /* you know... don't repeat... */
background-position: center center; /*center the background */
background-attachment: fixed; /*don't scroll with content */
}
put your image on the body background:
body{ background-image:url('your/image/url'); }
and put a div within the body:
<body><div class="div-body">{your site's contents}</div></body>
and create a css selector like this:
.div-body{
overflow:scroll;
width: 100%;
height: 100%;
display: block;
float: left;
}
try what is in this fiddle: http://jsfiddle/maniator/3RRYe/3/
demo
see if that works for ya ^_^