Formatting Backgrounds

CSS allows you quite a bit of control over your page's backgrounds. Most basic, it allows you to change the color, and on the most complex end, it allows you to set a fixed image aligned in a particular way as your background. On this page, I'll explain the different background attributes, but I'll leave the examples for you to try. (It shouldn't be hard, just create a page with lots of filler text so you have a scrollbar & try changing the attributes and values around).


body	{
	background-color: #000000;
	}
Is the most basic background option, that is the code currently applied to this page - thus, we have a black background. However, background codes can apply to lots of things, not just page bodies. For example:

h2	{
	background-color: green;
	}

Results in:

This is my h2.

However, solid color backgrounds aren't too interesting, so the rest of these codes apply to background images, starting out with the most basic...


body	{
	background-image: url('url goes here.jpg');
	}
Additionally, using the following values, your background image can be positioned and manipulated. Try experimenting!


body	{
	background-image: url(url goes here.jpg);
	background-attachment: scroll; 		/* values: scroll, fixed */
	background-repeat: no-repeat;		/* values: repeat, no-repeat, repeat-x, repeat-y */
	background-position: top left;		/* values: any combination of top/center/bottom & left/center/right
							or any percentage, like 50% 50%. For this to work, 
							the background must be non-repeating and fixed! */


Next Page >>