CSS Background-image

CSS Background-image

Background-image is the property of CSS that inserts a background image.

To add background image, you first have to have an image that you would like to appear on your page. If you have chosen an image from the net, you just have to download it and save it to your computer. You can do this by right clicking on the image. A menu will appear, click on "save image as". Once you have saved it to your computer, you can then insert the image as your background image for your web page. To do this, place the background image property to the element and include the location of the image.

body {
background-color: #FFFFFF
background-image: url (location of the image);
}

h1 {
color: #FF0000;
background-color: #000000;
}

If the image you want to attach is coming from the internet, you just type the full address of the file.

url("http://www.image.com/image.gif");

Repeated background image

When you post an image it will automatically be displayed to cover the entire screen. To control this image from appearing in the entire screen, you can use the background repeat property.

• To make the image horizontally repeated, use the "repeat-x" value next to the property background-repeat then separate them with colon.
• To make the image vertically repeated, use the "repeat-y" after the property background-repeat and separate them with colon.
• If you want to make the image horizontally and vertically repeated, just use the "repeat" value after the property background-repeat and separate them with colon.
• If you do not want an image to be repeated, just put the value, "no-repeat" after the property background-repeat and separate them with colon.

Here is the code if you want to avoid a repetition of an image:

body {
background-color: #FFCC66;
background-image: url("FILE or url NAME");
background-repeat: no-repeat;
}

h1 {
color: #990000;
background-color: #FC9804;
}

Lock background image

"background-attachment" commands a background photo whether you want it fixed or scroll along with the text element.

When you use fixed background image, as the word suggests, will make the image still and will not move with the containing element when a visitor scrolls the page. The unlocked background image, on the other hand, will allow scrolling of the image along with the texts.

There are two different values for background-attachment:

• Scroll - this is placed after the "background-attachment" property with a colon between to separate them. Ex. Background-attachment:scroll Using this value will allow the image to scroll with the page-unlocked.
• Fixed - this is placed after the "background-attachment" property with a colon between to separate them. Ex. Background-attachment:fixed Using this value will make the image locked.

body {
background-color: #FFCC66;
background-image: url("file or url name");
background-repeat: no-repeat;
background-attachment: fixed;
}

h1 {
color: #990000;
background-color: #FC9804;
}

Placing background image

Generally, when you attach a background image, it will automatically be placed at the top left corner of the screen. To control this, we use the "background-position" to change the default positioning giving you the control where you want the image be placed.

You can set the values of the property "background-position" in various ways. These ways, however, are formatted as a set of coordinates. Coordinates can be input as percentages of browser windows, fixed units or you can just opt to use the basic words, top, bottom, center, left and right.

Example values:

• background-position: 2cm 2cm - this value positions the image 2 centimeter from the left and 2 centimeter down the page.
• background-position: 50% 25% - this value positions the image centrally and one fourth down the page.
• background-position: top right – this value positions the image at the top-right corner of the page.

Compiling

Background property allows you to compress several properties for you to be able to write your style sheet in a shorter way, this making it easier to read.

background-color: #FFCC66;
background-image: url("file or url name");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

Using "background" will shorten your style command:

background: #FFCC66 url("file or url name") no-repeat fixed right bottom;

It will take you five lines to get the style that you want. If you use the "background" property, everything is incorporated in one line.

You have to make certain that the following order is followed:

[background-color] [background-image] [background-repeat] [background-attachment] [background-position]

When you leave certain properties blank, they will be set automatically to their default values.