Learn to set CSS background image with 4 Demos

The background image property

In the last chapter, we learned how to use color as background in HTML elements using CSS. In this chapter, we will learn how to use the CSS background-image property in HTML elements.

The background-image property is used to set the image as background in the HTML elements. The background images can be used in various elements like across the page (body), lists, DIVs, Paragraphs, headings, and others.

A background image example
Background fixed size image example

Along with setting the image as background, CSS has other image background properties e.g. to specify the position of an image, repeat the image or not etc. These are explained with examples below; let us look at the syntax of using the background-image CSS property.

How to use the background-image property?

Following is the general syntax of using the background-image property:

background-image: url(‘image location‘);

Where value URL specifies the path of the image.

You can also use this:

background-image: none;

None: this is the default, that means no background image to be displayed.

Example of using the background-image property

In this example, we will simply set the background-image of the body, that goes across the page. As mentioned earlier, by default image will be repeated. If the image is smaller it will be repeated to cover the whole body as the background image.

See the demo by clicking the link or image below:

CSS-background image property

Experience this example online

Background image position example

In this example, we will use the text and image. The text will be aligned left and image to the right position of <h1> heading. Click the image or link to have a look:

background image position

Experience this example online

As you can see, the background position is set by using the following syntax:

    background-position: right;

Background image: repeat or no-repeat example

As you can see in the above example, we used another line of code to specify the background as no-repeat i.e.

background-repeat: no-repeat;

To make an image repeat or not, we may specify following values in CSS background-repeat property:

To make background image repeat, use value:

repeat

To make background image as no repeat, use:

no-repeat

By default, this value is set to repeat. Or if you do not specify this value, the image will be repeated across the element as in the first example. See an example below with the default value:

Experience this example online

As you can see, the text and image are mixed up, as such, by default the image is repeated across the heading area.

Background image size

CSS3 comes up with the background-size property that sets the size of the image. This is how we can set the height and width of an image.

e.g.

background-size: 263px 60px;

Example of setting background image height and width

The following example shows how you can use the background image size property i.e to set the height and width of the image.

Experience this example online

Apart from height and width of the image, the background-size has the following options:

  • cover: This value scales the background image to the maximum area of specified element.
  • contain: This value fits the image inside the given element at its maximum so that no part of the image cuts.

Using multiple background images

You can set multiple image background by adding a comma “,” followed by second image URL.

This is how you can set the multiple background images:

background-image:url(“image1.png”),url(“image2.jpg”);

 

Further Reading: CSS Font