Website Design
Stationary or Fixed Website Backgrounds
Overview
One of my clients recently asked me how to keep a website background stationary. A stationary background does not scroll with the page it remains stationary while the content scrolls by on top. There are ways to accomplish this if you do not use cascading style sheets or CSS, however this example is a cascading style sheet example. Citadel Media uses cascading style sheets mainly because it is and has been the direction the future of website designing has been heading for sometime now for a variety of reasons.
SEO, search engine optimization is one reason (as websites utilizing cascading style sheets take less time to load and use less bandwidth when the webpage is called upon because the information that makes up the page remains on the server and is not brought down with the webpage) and of course cascading style sheets offer the convenience of not having to update each and every individual webpage every time a design change has been implemented which is a tremendous convenience if you have a website with a lot of pages.
body
{
margin: 0;
padding: 0;
background-color: #1F1F1F;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
height: 100%;
color: #FFFFFF;
background-image: url(../images/gateway.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
Steps: The last four background lines are what you need to pay attention to or add to your css body tag. If you are not sure how to abbreviate the path to your image then put the complete path to your image between the parentheses i.e. (http://www.example.com/example/images/example.gif). Using abbreviated paths allow you to switch domain names without having to update all your pages.
The first background line calls out the path to your image.
The second background line makes the image stationary.
The third background line is so your image does not tile or repeat.
The fourth background line centers you image inside the webpage.
You can also place this in the head section of your webpage however you really want to refrain from doing this as you want style to remain on the server for reasons as mentioned above. I hope this was helpful.
