This trick with make any background image remain fixed while you scroll the website.
Note: Your website must be tall enough to scroll.
This technique will allow you to add a background image to your work that is stretched to cover the entire browser. It is supported by all new browsers. Some older browsers (like IE 8) need all little bit of extra code to make it work.
Note: This exercise is best added at the beginning of a website build. It can be added to an existing site but there can be a few layout problems you’ll have to adjust to make it work. In my experience I’ve found that it causes less problems adding this CSS to each page rather than the external CSS sheet.
Note: You’ll need a large image. Current full screen image size standard is 1600x1200. You can use something like Photoshop to create the right size.
A div tag is able to have its own background image. This will let you put an image into a box and allow you to put text of the top.
Note: Your image should either be the exact size of the div or your image needs to be able to be repeated. A repeatable image is good as the div can expand and contract and the image will fill the space. To repeat your background image you use the 'background-repeat' function.