CSS Background Color and Image Styling Properties Explained

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.

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.

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.

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

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

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:

div {
   background-image: url("image.png");
   background-repeat: repeat-x; /* Repeats image 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.

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.

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:

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.

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.

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.

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.