CSS Background


The CSS background properties are used to define the background effects for HTML elements.

List of CSS background properties

  1. background-color
  2. background-image
  3. background-size
  4. background-repeat
  5. background-attachment
  6. background-position
  7. background-origin
  8. background-blend-mode
  9. background-clip

Background Color

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

<div class="bgcolor">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat.
</div>
<style>
.bgcolor {
  background-color: lightblue;
  padding: 10px;
}
</style>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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 width and height. While using background image, be careful not to affect the readability of the text contents.

<div class="bgimage">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat.
</div>
<style>
.bgimage {
  background-image: url("background.jpg");
  padding: 10px;
}
</style>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

When using a background image, use an image that does not disturb the text or change the color text to maintain readability.

Background Image - Repeat

By default, if the image being used as the background-image is smaller than the content width and height, it tends to both horizontally and vertically to cover the content. Some images should be repeated only horizontally or vertically to make them look visually appealing. Either repeat-x or repeat-y should be used in such cases while no-repeat can be used to avoid image repetition.

.bgimage {
  background-image: url("background.jpg");
  background-repeat: repeat-x; // repeats horizontally
}

Background Image - Set position and no-repeat

If the background image is smaller than the HTML element size where it is being used as background, you can set the repetition to no-repeat and also position such background image using directional properties like left, right, top or bottom.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="bgimage">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>	
<style>
.bgimage {
  background: lightblue url("logo-icon.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  padding:15px;
}
</style>

Background Image - Fixed position

You can also create a parallax effect making the background image fixed and preventing it from scrolling with the flow of the web page scrolling using background-attachment property.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
.fixed {
  background-image: url("background.jpg");
  background-attachment: fixed;
}

CSS Background - Shorthand property

Multiple CSS properties can be written as one single value which is termed as shorthand property. CSS background values can also be written using shorthand property as shown below.

.shorthand {
  background: #ffffff url("background.jpg") no-repeat left top;
}

When using the shorthand property, the property values must be in the order as shown below.

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

Any number of property values can go missing from the shorthand as long as the other ones are in the order.

CSS Multiple Image Backgrounds

CSS allows you to add multiple background images for an element using the background-image property. The background images are separated by commas and the images are stacked on top of each other where the first image is closest to the viewer.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.multiple{
  background-image: url(background.jpg), url(web-design.jpg);
  background-position: right top, left top;
  background-repeat: no-repeat, no-repeat;
}
// Shorthand 
.multiple{
  background: url(background.jpg) right top no-repeat, url(web-design.jpg) left top no-repeat;
}

CSS Background Size

The CSS background-size property allows you to specify the size of background images in lengths, percentages or by using one of the two values contain or cover.

.size{
  background: url(background.jpg);
  background-size: 500px 100px;
  background-repeat: no-repeat;
}

CSS Background Size - Contain

The contain value scales the background image to be as large as possible with its width and height positioned inside the content area. Depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image.

The contain value scales the background image to be as large as possible with its width and height positioned inside the content area. Depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image.
.contain{
  background:url(background.jpg) no-repeat;
  background-size:contain;
  padding:10px;
}

CSS Background Size - Cover

The cover keyword scales the background image so that the content area is completely covered by the background image horizontally as well as vertically. Some parts of the background image may not be visible in the background positioning area.

The cover keyword scales the background image so that the content area is completely covered by the background image horizontally as well as vertically. Some parts of the background image may not be visible in the background positioning area.
.cover{
  background:url(background.jpg) no-repeat;
  background-size:cover;
  padding:10px;
}

CSS background-origin Property

The CSS background-origin property specifies the alignment position of the left top edge of the background image to the HTML element. The optional property values are as follows:

  1. border-box - background image starts from the upper left corner of the border
  2. padding-box - background image starts from the upper left corner of the padding edge (default)
  3. content-box - background image starts from the upper left corner of the content
.origin{
  border: 3px solid #333;
  padding: 20px;
  background: url(background.jpg);
  background-repeat: no-repeat;
  background-origin: content-box;
}

CSS background-clip Property

The CSS background-clip property identical to the background origin property with identical options and effects. It is generally used for background colors while background origin is used for background images.

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

CSS Background Blend Mode

The css background-blend-mode property allows you to blend two background images together and create special background effects using the blending options like screen, color-burn, lighten, darken, multiply, exclusion, difference, overlay, etc. CSS background-blend-mode option accepts any color blending option that you can find on photo editing applications like Adobe Photoshop.

.blend {
  background: url(background.jpg),url(web-code.jpg);
  background-blend-mode: screen;
}