Important Docs

Background Images

If you want to add a background image instead of a plain color there are some considerations you should make before doing so:

• Is the background image discrete enough to not take away the focus from what's written on it?
• Will the background image work with the text colors and link colors I set up for the page?
• Will the background image work with the other images I want to put on the page?
• How long will the page take to load my background image? Is it simply too big?
• Will the background image work when it is copied to fill the entire page? In all screen resolutions?

After answering these questions, if you still want to add the background image you will need to specify in the CSS body rule which image should be used for the background. For example:

  body { background-image: url(images/rainbow.jpg) }  

Note:
If the image you're using is smaller than the screen, the image will be replicated until it fills the entire screen.

If, say you wanted a striped background for your page, you wouldn't have to make a huge image for it. Basically you could just make an image that is two pixels high and one pixel wide. When inserted on the page the two dots will be copied to fill the page - thus making what looks like a full screen striped image.

---

You may have noticed that background images scroll with the page when you use the scroll bar. The background image will scroll when the user scrolls down the page, unless you have set it to be fixed:

  body { background-attachment: fixed }  

By adding the background-attachment: fixed you force the browser to set the background as fixed even if the user is scrolling down the page.

For an example, see Fixed Background.