CSS Backgrounds

In CSS, background properties are used to define background attitudes for HTML elements.

Below are the list of CSS properties used for background attitudes.

Background Color

The background-color property specifies the background color of an element.
In CSS, a color is usually specified by:

• a HEX value  (e.g: #FF00FF)
• an RGB value (e.g: rgb(255,0,0))
• an RGBA value (e.g: rgba(255,0,0,1))
• a color name - (e.g: green)
• The body element represents the whole body of a webpage.

The following example sets the background color of a webpage to "limegreen"

.

body {
background-color: #00FF00;
}

More Background Color Examples

h1 {
background-color: #D47FFF;
} p {
background-color: #FFBF55;
} div {
background-color: #7F1FFF;
}

Background Image

The background-image property allows you to use an image as the background of an element.

This is how to set the background image of a webpage:

Features of the Background Image

We have some certain features for the background image.
By default CSS background images normally repeat itself horizontally and vertically.

However, this occurs if you use a background image that is smaller in size to the HTML element, but there are some images that will only need to be repeated vertically, or horizontally, or not at all.

To enable this alternate, we have the backround-repeat property.

Repeating Background Vertically or Horizontally

To repeat an image horizontally, assign the repeat-x value to the background-repeat property.

div {
background-image: url("flower.png");
background-repeat: repeat-x;
}

To repeat an image vertically, assign the repeat-y value to the background-repeat property.

div {
background-image: url("flower.png");
background-repeat: repeat-y;
}

Using a Background Image Without Repeat

To set a background image without any repeat, assign a no-repeat value to the background-repeat property.

div {
background-image: url("flower.png");
background-repeat: no-repeat;
}

Setting a Background Image Position

The background-position property is used to set the background-position of an element.

div {
background-image: url("flower.png");
background-repeat: no-repeat;
background-position: top left;
}

Shorthand property for CSS Backgrounds

The term 'shorthand' in CSS defines a way to shorten your CSS codes using a single property.

To shorten your codes, you can specify all the properties in one single property. This is called a shorthand property.

• The shorthand property for CSS background is simply 'background'

Example

Now, to make work easier and to make codes shorter, we are going to define all the above examples using a shorthand property.

.background {
background:url('/images/css-background-example-flower.png') bottom center no-repeat lightgreen;
}

What You Should Know at the End of This Lesson

• You should be able to understand what CSS Background Image is all about.
• You should be able to decide when to repeat or not to repeat a background image with CSS
• You should be able to understand the basic CSS Background Properties, like (background-color, background-image, background-repeat) and so on.