CSS Backgrounds and Colors

Introduction
This is the third part of my series, Basics of CSS2. In this part of the series, I talk about background and colors in more detail. Many HTML elements especially containing elements (blocks) can have background image or color. A containing element is an element that can have smaller HTML elements.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Background Image
To give an element a background image, use the following property/value pair.

background-image: url("http://www.somesite.com/images/myImage.gif")

The property (name) is background-image. Note the hyphen. The property value is url("myImage.gif"). The URL of the image goes in quotes (single or double) inside the brackets. If the HTML file having the style sheet and the image are in the same directory, then you do not need the complete URL; the name of the file would suffice in that case.

The above property/value pair as well as any property/value pair goes either into the value of the style property of the HTML element or into a rule of the style sheet in the HTML Head element or into a rule in some external style sheet. Remember, if you have more than one property/value pairs in a rule, use semicolons to separate them.

You may have a rule like this in the HTML Style sheet in the HTML HEAD element:

body {background-image: url("myImage.gif")}

or

div {background-image: url("myImage.gif")}

background-repeat
repeat-x
You may have a small image and you want it to repeat itself in the background horizontally from left to right. You have to add another property/value pair; like in

div {background-image: url("myImage.gif"); background-repeat:repeat-x}

The added property is, background-repeat and the value is, repeat-x. The first property/pair has to be there, to download the image.

If the image were small, then you would have one long horizontal stripe background image of the repeated small image at the top of the HTML element.

repeat-y
You may have a small image and you want it to repeat itself in the background vertically from top to bottom. You need this for that:

body {background-image: url("myImage.gif"); background-repeat:repeat-y}

The added property is, background-repeat and the value is, repeat-y. The first property/pair has to be there, to download the image.

If the image were small, then you would have one long vertical stripe background image of the repeated small image on the left of the HTML element.

repeat
You may have a small image and you want it to repeat horizontal and vertically; that is to repeat and fill the whole background of the element. You need this for that:

body {background-image: url("myImage.gif"); background-repeat:repeat}

The added property is, background-repeat and the value is, repeat (no x or y). The first property/pair has to be there, to download the image.

no-repeat
If you have a small image and you do not want it to repeat at all, then you have to do this:

body {background-image: url("myImage.gif"); background-repeat:no-repeat}

With this, there will be no repetition horizontally, no repetition vertically and no repetition to fill the background.

Note: the HTML BODY and DIV elements have been used above; you can use other elements.

Note: with some browsers if the image is small and you do not use "no-repeat", the browser would still repeat the image. If you do not want any repeat, use, no-repeat and the corresponding property, background-repeat.

Note: If the image is large and you do not want any repeat, you do not need "no-repeat" and the corresponding property.

Note: the image takes long to download. The larger the image, the longer the time it takes to download.

That is it for background-repeat.

The background Property
You might want a background image, and/or a repeat style and/or a background color. You can achieve this as follows:

body {background-image: url("myImage.gif"); background-repeat:repeat-y; background-color:bisque}

With the background property, you do not have to use the above properties; you use the values separated from themselves with spaces; as follows:

body {background: url("myImage.gif") repeat-y bisque; color:blue}

Between the property, background, and the values is the colon. Between the values are spaces. After the values of the background property, you have a semicolon before the next property/value pair.

The 'background' property is said to be a shorthand property for setting the individual background properties. There are other shorthand properties like this, as we shall see.

Background Color
If want a background color, you need the property, background-color and the color name or color code as value. I wrote an article called XHTML Colors. There I gave names of colors and their corresponding code. The kind of code I gave is called Hexadecimal Code. To have a background color for the BODY element with a bisque color, you will either type

body {background-color:bisque}

or

body {background-color:#FFE4C4}

In the first case the name of the color is used; in the second case, the corresponding hexadecimal code for the color is used. Both give the same color, bisque. The hexadecimal code begins with a hash (#) followed by six characters (in some cases three characters). Each color name has its own hexadecimal code.

Foreground Color
What CSS calls the Foreground color is the color of text in an HTML element. In my opinion the name is not very appropriate. However, accept that an HTML element can have a background color and a foreground color. The foreground color is the color of the text in the element. The property name for foreground color is simply, color. The value is either the name of the color or the corresponding color code. If you want a foreground color of blue, for a DIV element, you will type

div {color:blue}

or

div {color:#0000FF}

The first rule above has the name of the color and the second rule has the corresponding color code. You should have a look at the list of colors that I wrote. To see the web page, just type, XHTML Colors, with my name, Chrys in the Search box of this page and click Search. If you have the Google Search box on this page, use it.

We have got the basics of CSS background and colors. In the next part of the series, we shall continue with something else.

Chrys