1. Home
  2. Css
  3. CSS Backgrounds

 CSS Backgrounds CSS

CSS Backgrounds  


CSS Backgrounds

CSS background-color

The background-color property specifies the background color of an element.

The background color of a page is set like this:

Example

body {
  background-color: lightblue;
}

CSS 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.

The background image for a page can be set like this: 

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("../../uploads/w3tpoint_logo.png");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

CSS background-repeat

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

Some images should be repeated only horizontally or vertically, or they will look strange, like repeating again and again.

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("../../uploads/w3tpoint_logo.png");
  background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>

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

CSS background-repeat: no-repeat

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

Example

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

In the example above, the background image is placed in the same place as the text. We want to change the position of the 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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("../../uploads/w3tpoint_logo.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>

</body>
</html>

CSS background-attachment

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):

Specify that the background image should be fixed or scroll

body {
  background-image: url("../../uploads/w3tpoint_logo.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
  background-attachment: fixed;
  ##background-attachment: scroll;
}

CSS background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

The shorthand property for background is background.

Example

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
  margin-right: 200px;
}

When using the shorthand property the order of the property values is:

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

It does not matter if one of the property values is missing, as long as the other ones are in this order.

Download free E-book of CSS

#askProgrammers
Learn Programming for Free

Join Programmers Community on Telegram

Talk with Experienced Programmers

Just drop a message, we will solve your queries