No replies to this topic

[Joe]

CSS Background

Background Color

There are several ways to do a background and many commands to help you out. One of the main codes used is to set the background color. One way to do this is to use a color to insert the color as shown below:

body {background-color: yellow}

Another way is to enter a Hex Code:

body {background-color: #FFFF00}

Another way that is very uncommon is to specify the RGB mixture like so:

body {background-color: rbg(250,0,250) }

A final property that can be used with the background-color property is the transparent property which is often used with other selectors in order to see through to a background color or image of the body. Like this:

P {background-color: transparent}

Background Images

When setting a background image there are many possibilities. The following examples will provide you with a good idea as to what can be accomplished using background images

To place a background image you must have the image somewhere accessible on the web then use this code to place it as a background image:

Body {background-image: url('http://yourdomain.com/image.jpg')}

Well now that's all fine and dandy you've got your image up and everything but now lets say it didn't take up the space you wanted it to and you want it to continue to repeat over you're entire background. Well all you need to do is add this to your code:

Body {background-image: url('http://yourdomain.com/image.jpg'); background-repeat: repeat;}

There are 4 different values you can use along with "repeat" they are:

repeat - Default. The background image will be repeated vertically and horizontally

repeat-x - The background image will be repeated horizontally

repeat-y - The background image will be repeated vertically

no repeat - The background-image will be displayed only once

If you want to make it so that your background image scrolls down with the page there is a simple solution to that:

Body {background-image: url('http://yourdomain.com/image.jpg');background-repeat: no repeat; background-attachment: fixed;}

Now your image scrolls with the page so 1 image = less loading = happier visitors.

The final and possibly most important thing you can do with background-images is to position them correctly. There are several value's to positioning background and here's an example just replace the word "Value" with a value given after the code:

body {background-image: url('http://yourdomain.com/image.jpg'); background-position: Value;}

The value's that can be used in place of "Value" are:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

These are the most common, If you do not put in a second word then the default will be "center" for the second word.

The uncommon value's that can be used are:

x% y% - this defines the relative position the image is placed away from the top left corner. If one value is set the other value is defaulted at 50% unless specified otherwise. Replace the X and Y with numbers.

xpx ypx - this defines the absolute position away from the top left corner in pixels or whatever other measurement you use. Replace the X and Y with numbers.


And there you have it. All you need to know about background images in CSS.