CSS Background

The CSS Background Property used to set the Background in Webpages. Several additional Background Properties are also provided to control CSS Backgrounds.

Definition is usually done in the Background Body Element. Which applies to our entire web page.

. You can set the color background if you want. Or you can also set image background.

CSS background properties:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS Background Color

If you want to set the color background for your HTML document, then the background-color property of CSS used. And its value defined in color.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: red;
}
</style>
</head>
<body>
<p>This paragraph has a red background color!</p>
</body>
</html>

Output

This paragraph has a red background color!

CSS Background Image

Background image image used to set Image Background. And its value defined in Image URL.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("background-image:url(http://www.tutorialstrack.com/wp-content/uploads/2019/01/study-footer.jpg)");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

</body>
</html>

Output

Hello World!

CSS Background Image – Repeat

If your image sizes are small. So she will not cover the entire background. Cover Your Image Complet Background For this, background-repeat property used. It can have four potential Values.

  • repeat – This value will repeat your background vertically and horizontally on both sides.
  • no-repeat – Background Image will not be repeat on any side by this value.
  • repeat-x – Background Image Horizontally Repeat from this value.
  • repeat-y – This image will be Background Image Vertically Repeat.

Example

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

CSS Background Image – Set position and no-repeat

Backgrounds can affect your content. Therefore, it is important to manually control the position of the Background Image.

Therefore, background position property used control the position of the Background Image. By Default Background Image position is top-left. When you manually set it, then define the distance from the first value left side in it. And define the distance from the second value top.

Example

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

CSS Background Image – Scroll

You can also do Scroll Setting of Background Image. For this, background-attachment property used. It has two possible values.

  • fixed – When you scroll the page up or down. Then the Background Image also moves up and down from this value.
  • scroll – and Background Image from Scroll Value remain in one place.

Example

body {
  background-image: url("img.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}
body {
  background-image: url("img.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

CSS Background – Shorthand Property

You have so far known about many of the CSS Background Properties. We were defining all of these properties separately. But, you can also define all of these properties together. This technique called Shorthand Method.

body {
  background: #ffffff url("img.png") no-repeat right top;
}

When you set the Background Image from the Short and Method, then the order fixed in advance. Which are as follows.

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position