This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size. Tap Here!

Smartphone icons created by Freepik - Flaticon

2.2.1 Background Image

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

Example 1: Background Image part 1

Set the background image for a page:

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

Example 2: Background Image part 2 Bad Combination

This example shows a bad combination of text and background image. The text is hardly readable:

body {
  background-image: url("bgdesert.jpg");
}

Note: When using a background image, use an image that does not disturb the text, i.e. does not make reading the text difficult.

The background image can also be set for specific elements, like the <p> element:

Example 3: Background Image part 3 Background Image for <P>

p {
  background-image: url("paper.gif");
}