web development

CSS Background Repeat

❮❮ PreviousNext ❯❯

---

By default, the CSS background image property repeats an image both sides horizontally and vertically.

CSS Background Repeat

Some images should be repeated only vertically or horizontally, or they will look strange, like this:

Example

body {
  background-image: url("gradient_rc.png");
}

Try it Yourself »

If the image above are repeated only horizontally (background-repeat: repeat-x;), the background will looks better:

Example

body {
  background-image: url("gradient_rc.png");
  background-repeat: repeat-x;
}

Try it Yourself »

Note: To repeat an image vertically, set background-repeat: repeat-y;

---

CSS background-repeat: no-repeat

Showing the background image only once is also defined by the background-repeat property:

Example

Show the background image only once:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

Try it Yourself »

In the example above, the background image is placed in the same place as an text. We want to change the position of the background image, so that it does not disturb the text too much.

---

CSS background position

The background position property is used to specify the position of the background image.

Example

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Try it Yourself »

---

 

Test Yourself with Quiz And Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »

---

❮❮ PreviousNext ❯❯

---

web development