Background images are extremely common on web sites. Many sites include an overall pattern as a background, like wallpaper on a computer. Some sites use images as a reminder of site location or product name or company logo or navigation or just decoration. There are many ways to make use of this very popular feature. If you have coded HTML pages you may have used the attribute background in the body element (or some other element), something like: body background="mypic.gif". With CSS, the coding contains more information and is longer, but it has the same effect.
The attribute is background-image. By default it has no value. It is not inherited. The value is typed as a uri. For example, the book.gif has been added as a background image to one part of this paragraph. The attribute in the style sheet is: background-image: url(book.gif). Since the value of the attriubte is a url, it can point to any location you wish. As always it is best not to link the images on someone else's site to your site. If their site is unreachable, then your site looses its images. In addition these links will make your site slower (or much slower) to load.
As you can see this particular image is not suitable as a background for text because it obscures the text. Let's make it a usable background image to this paragraph by adding another attribute: background-repeat. Background-repeat controls the direction of repeats (or direction of "tiling"). Values include repeat-y, repeat-x, no-repeat. You can experiment with these.
Background images can also be positioned and there are many choices available with the background-position attribute: left, center, right, top, center, bottom as well as the usual absolute and relative length units. This paragraph has the book.gif at top right with background-repeat: no-repeat.
Background images can also be positioned and there are many choices available with the background-position attribute: left, center, right, top, center, bottom as well as the usual absolute and relative length units. Interestingly the order of the key words does not matter as long as there are only two key words present. (And as long as they are not used with length units. If only one position key word is used browsers assume the second one is center. Here background-position is set to bottom, again with background-repeat set to no-repeat.
Percentages act in somewhat the same way as the key words. There can be a maximum of two percentage values. The left top corner of an element is 0% 0%. The right top corner is 100% 0%. The left bottom corner is 0% 100% and the right bottom corner is 100% 100%. If only one percent is present browsers will assume this is the horizontal value and the vertical value will automatically be set at 50% (vertical center). These percentages have to do with the element where background-position is being used.
Relative and absolute units act in somewhat the same way as percentages. There can be a maximum of two percentage values. The left top corner of an element is 0 0. Any length values will indicate offsets (horizontal and verticl shifts) from the left top corner. The maximum values applicable depend on the size of the element. Negative values can also be used, they will shift the background image away from the contents of the element. If only one length is present browsers will assume this is the horizontal value and the vertical value will automatically be set at vertical center. These length units have to do with the element where background-position is being used.
If you use background-position and the image is not visible it may be because the units you typed push the image out of the element.
One final attribute for background is background-attachment, which controls what the image does when the user scrolls down the page. There are three possible values: scroll, fixed, inherit. Background attachment is not inherited but it can be inherited from the parent element. The default value is scroll and I am sure you have seen this happen. Move down a web page and the background image moves down as well. Using fixed means the element does not move from its original position. (This is true unless the browser's window is changed, then the image repositions itself and again stays fixed.) I leave the demonstration of this attribute to you.