🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

CSS Background Color and Image Styling Properties Explained

Reading time 5 min
Published Sep 6, 2016
Updated Jan 23, 2020

TL;DR – CSS background is a shorthand CSS property letting you indicate multiple styles for the element background.

Advantages of Using background Shorthand

In the example below, we specify the CSS background color by using a HEX value, followed by an image, repeat, and position values. We separate the values by spaces and finish the line with a semicolon.

Example
body {
   background: #ffffff url("bird.png") no-repeat left top;
}

Note: you should use background CSS shorthand to keep all background properties in one declaration. It will help you produce short and clean code.

Order of Properties

Remember: this is the recommended order for including the background properties.

background-color

The background-color property assigns background colors to HTML elements.

In the following example, <div> has a CSS styling property background-color set to lavender.

I have a lavender background!
Example
div {
   background-color: lavender;
}

Note: background-color accepts color keywords, HSL, RGB, and HEX codes. To set background color opacity, CSS offers RGBA and HSLA.

background-image

The background-image property adds one or multiple images to HTML elements. You can set several background images by separating the background URL in CSS by a comma.

Note: by default, a background-image is repeated vertically and horizontally, and positioned at the top-left corner of an HTML element.

Example
div {
   background-image: url("image.png");
}

Note: background-image accepts these image types — SVG, PNG, JPG, GIF, WEBP.

This is an example of a good background image. It's clear and the text is easily readable.
This is an example of a bad background CSS image. It's too colorful and the text is hardly readable.

To add an image correctly, you need to specify the CSS background URL. In cases there are issues with the image URL, none specifies the image.

Tip: even though you add an image, do not forget to include the background-color property as well. If there is an issue with the background color, CSS will show the selected color instead.

background-repeat

The background-repeat property controls how background images repeat vertically or horizontally. You can choose your image to repeat:

  • only horizontally with repeat-x
  • only vertically with repeat-y
  • both horizontally and vertically with repeat
  • not repeated at all with no-repeat

In this example, we use repeat-x to repeat the image horizontally:

Example
div {
   background-image: url("image.png");
   background-repeat: repeat-x; /* Repeats image horizontally */
}

This image is repeating horizontally!

Note: it is standard that repeated images are clipped to the element size. You can make them stretch by using round, or distribute as much as possible without clipping with space.

background-position

The background-position property lets you modify the position of a background image or a gradient.

In the example below, you see an image positioned at the center. The image does not repeat since we use a no-repeat value.

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

Possible Values

One or several values (separated by commas) can determine the position.

  • left
  • right
  • top
  • center
  • bottom
  • various combinations of the above

Tip: if you only specify one position, it defines the horizontal location. The missing vertical value becomes center by default.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

background-attachment

The background-attachment indicates whether the position of a background image or gradient is fixed, or moves while scrolling.

In the example below, we assign a fixed value to the background image:

Example
body {
   background-image: url("image.png");
   background-position: left top;
   background-repeat: no-repeat;
   background-attachment: fixed; /* Background image will not move when scrolling */
}

Possible Values

You can use three keywords to set how the CSS background will look:

  • fixed does not allow the image to move while users scroll.
  • local follows the content of the element. If it has a scrolling feature, the background moves with the element. The image position becomes relative to the scrollable area, not the border.
  • scroll sets that the background scrolls with the main menu, but does not move inside the local view.

background-origin

The background-origin sets how to show CSS background: inside the border, inside the padding, or from one side to another.

Example
div {
    border: 10px double black;
    padding: 15px;
    background: url(sheet.gif);
    background-repeat: repeat;
    background-origin: padding-box;
}

Possible Values

  • border-box places the background relative to the border-box.
  • padding-box places the background relative to the padding box.
  • content-box places the background relative to the content box.

Remember: the CSS ignores background-origin when background-attachment is fixed.

background-size

The background-size defines the size of the background image. You can set images to keep their original size, stretch them, or fit them in a specific area.

Example
div { 
  background: url(https://github.com/bitdegree/banners/blob/master/learn/pom-laptop.png?raw=true);
  background-size: 60px 90px;
}

Note: when background images leave empty spaces, you can fill them with the background-color. Additionally, this color appears when images are transparent.

Possible Values

  • contain shows the original size of an image even if it leaves empty spaces in the element.
  • cover makes sure that the background image will always fit the whole element (can crop or stretch the image for this purpose).
  • auto tells the browser to calculate image size according to the original size of the image and the aspect ratio.
  • <percentage> sizes an image according to the specified percentages.
  • <length> specifies the exact size of an image.

background-clip

The background-clip sets how much a background image can leave the padding or content of an element.

Example
div {
    background-clip: content-box;
    border: 5px dotted black;
    padding: 20px;
    background: lightblue;
}

Possible Values

  • border-box is the default value. It sets the background image or color to reach the outside edge of the border.
  • padding-box prevents the image or color from overstepping the padding.
  • content-box applies image or color only to the content of the specified element.

CSS Backgrounds: Useful Tips

  • While setting the website background, remember that the first value background-position indicates the horizontal position, while the second indicates the vertical.
  • Note that background-origin must go before the background-clip since they can have the same values: border-box, padding-box or content-box.
  • There is no limit to how many background images you can set. You simply need to remember to include the CSS background URL correctly.