Background Manipulation
Find out how to control how your background's supposed to look. With the power of CSS, doing this is easy. You can use this in just about any HTML attribute such as div, td, quote and of course, body. Are you ready? Let's begin.
background-color
This will change the background into a solid color. The value for this should be the color's hexadecimal code. So, if you want to break away from the default white background color, here's the code:
background-color: #000;
Just change the underlined text to whatever color you want.
background-image
This will add a tiled image in your background. This is the code for it:
background-image: url('background.gif');
You just replace the underlined text with the location of your background image. Don't forget to enclose the URL of the background image in url('') or else it won't show up.
background-repeat
By default, your background repeats from left to right and top to bottom. Sometimes, you only want the background to repeat horizontally, vertically or not at all. To do this, here's the code:
background-repeat: no-repeat;
The code above will not repeat the background image. Other values which you can replace the underlined text with are: repeat-x (repeats background horizontally) and repeat-y (repeats background vertically).
background-attachment
This will define the way your background is attached. By default, your background repeats as you scroll down. If you want your background to be watermarked (doesn't scroll when your content does), here's the code:
background-attachment: fixed;
In HTML, its equivalent is bgproperties="fixed", however, it's my opinion that using CSS is better as bgproperties="fixed" doesn't work in Firefox (or at least the version of Firefox I'm using).
background-position
By default, your background's position starts from the top left. If you want to set the position of the background, here's the code:
background-position: left top;
You can see there are 2 values for this. The first one (left) is the x-position or horizontal position. The second one (top) is the y-position or the vertical position. Remember that x-position always comes first. Other values for them are: right, center and bottom. You can also put in their position in pixels such as this example:
background-position: 50px 20px;
In the code above, your background will start 50 pixels from the left and 20 pixels from top.
Putting It All Together
Ooohh... Now, we're getting to the good part. Hrm... Let's say I want to make a web page which has a black background with a red stripe across the middle and I want that stripe to be watermarked. How do I code it in CSS? Here's how:
body {
background-color: #000;
background-image: url('redstripe.gif');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: left center;
}
Got it? But there is a better way in presenting this. Call it a short cut:
body {
background: #000 url('redstripe.gif') repeat-x fixed left center;
}
Both ways get the same result. Just remember, that in the shortcut, only use the background as the property. No more background-color, background-position, etc. The values should also be ordered the way I listed them in this tutorial. If you forgot already, here's the format:
background: color image repeat attachment position;
You may leave out some values if you don't need them or if you plan on using the default values.
Conclusion
Wasn't that easy? The notes below are only for the validation conscious. If you're not one of those people, feel free to ignore them as it will also work even if you don't follow them.
- You should always put a value for
background-colorif you are going to change thecolorproperty of any tag and vice versa. The values forbackground-colorandcolorshould also be different. - In
background-position, the values for x-position and y-position should be consistent. If you're going to set its value in pixels, both x and y-positions should be in pixels. If it's position is in the form of a word (left,right,top,center,bottom), both x and y-positions should be in the form of a word. Example: "50px 20px" and "left top". Both examples will validate, however, these will not: "50px center" or "right 20px".
If you have any questions or if you want to discuss this tutorial, you may post at Blinding Light MB.