Introductory
Most sites these days will have a background that relates to the theme of their layout.
Whether it's with personal use or commercial, custumizing the background of your webpage can come in helpful.
A nice background color or image can be very appealing to the visitor.
Background Color
Lets start with changing the background color.
Even if you want an image as the background of your webpage, it's best to select a background color.
Say if something happens to the image file, you wouldn't want to have just plain white as your background.
To control you background color, use the following;
background-color: #000000;
Remember to change the hex code to a color that would go with your layout or theme.
Background Image Properties
Next is learning how to make an image as your background instead of a single color.
/* change popcorn.gif to whatever the url of the image is */
background-image: url(popcorn.gif);
If the image is on another server, remember to include http:// or if it is in another folder.
If you want your image to repeat over and over again, you must include that.
background-repeat: repeat;
You can use 4 values for this property; repeat, repeat-x, repeat-y, and no-repeat. The values are pretty much self explanatory.
If your image is not the right size, you may want to include these properties as well.
/* this controls the position of the background image */
background-position: center;
/* if you don't want your background to scroll with the content, put the value as fixed. If not, put the value as scroll. */
background-attachment: fixed;
The background-positioning property has 5 values; center, top, bottom, right, and left.
Although inserting this property is a good habit to get into, it's only necessary if the image isn't the right size.
|
