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

Code has been added to clipboard!

Background Image CSS: How to Add Images as Backgrounds

Reading time 4 min
Published Nov 19, 2016
Updated Jan 21, 2020

TL;DR – You set CSS background images for HTML elements by using the background-image property or the background shorthand.

Making CSS Set Background Image

The CSS background-image adds images as backgrounds of HTML elements. Such backgrounds can either be images. The background image url() lets you set any image as the background.

This simple example shows how to add a background image in HTML by using the background-image CSS property:

Example
#example1 {   
    background-image: url(https://cdn.bitdegree.org/learn/space.jpeg);       
}

Adding Multiple Pictures

 

One element can have multiple background images in CSS. You need to separate them by commas and remember that the images stack on one another. The first image is the main layer, meaning that other pictures are behind it.

Example
#example1 {   
    background-image: url('image.png'), url('other_image.jpg');        
    background-position: right bottom, right top;        
    background-repeat: no-repeat, repeat;
}

Another option is to apply the background shorthand and include all styling properties for the background in one declaration:

Example
#example1 {    
    background: url('image.png') right bottom no-repeat, url('other_image.jpg') left top repeat;
}

Setting background-size

The background-size styling property has three possible values:

  • auto: the default value which tells the browser to decide the best size for the background image.
  • cover: this value guarantees that the background image always covers the whole container (even if the image needs to be stretched or cut).
  • contain: this value indicates that the actual image size needs to be shown even if it does not fill the container.

This example shows the differences between contain and cover values:

Example
#div1 { 
    background: url('dog.png');
    background-size: contain; 
    background-repeat: no-repeat;  	
}

#div2 {
    background: url('dog.png');
    background-size: cover;
   background-repeat: no-repeat;  	
}

Original size of the background-image:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Resized background-image:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example
#div1 {
    background: url('image.png');
    background-size: 50px;
    background-repeat: no-repeat;  	
}

Sizes of Multiple Pictures

The background-size property accepts multiple values to set the sizes for several background images. The sizes apply according to the position of background images in the declaration list.

Example
#example1 {    
    background: url('image.png') left top no-repeat, url('other_image.png') right bottom no-repeat;    
    background-size: 100px, 150px;
}

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

Full-Size Website Background

Sometimes it is necessary to make the background image in CSS to always cover the whole browser window.

The following example aims to do the following things:

  • Images fill the whole page and leave no whitespace.
  • Images are scaled if necessary.
  • The image is centered on the page.
  • Images do not trigger a scroll bar.
  • Images keep their proportions.
Example
html {    
    background: url('image.png') no-repeat center fixed;     
    background-size: cover;
}

This example follows these steps:

  • Use the <html>.
  • Center the background image and set a fixed position for it.
  • Set the background-size to cover.

However, this technique has issues in Internet Explorer. Therefore, we offer you an alternative of making CSS set a centered background image and keeping its aspect ratio even though the image covers the whole page.

Example
#example1 {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#example1 img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

Positioning Background Images

The background-origin property allows us to position the CSS background image according to the content, borders, or padding.

The code example below shows the background-origin property in use:

Example
#example1 {  	    
    border: 15px solid black;    
    padding: 25px;    
    background: url('dog.png');      	
    background-repeat: no-repeat;      	
    background-origin: content-box;
}

This property accepts three values:

  • border-box: positions the image to be relative to the border box.
  • padding-box: (the default value) positions the image to be relative to the padding box.
  • content-box: positions the image to be relative to the content box.

background-clip Property

The background-clip styling property is for setting how far the background image can extend beyond the padding or content of elements.

Example
#example1 {
    border: 15px dotted red;
    padding: 25px;
    background: url('https://cdn.bitdegree.org/learn/adorable-dog.jpg?426d93cd'); 
    display: inline-block; 
    width: 0px; 
    overflow: hidden; 
    line-height: 0;
    background-clip: content-box;
}

This property can take these three values:

  • border-box: (the default value) extend the background to the outer edge of the border.
  • padding-box: extend the background to the outer edge of the padding.
  • content-box: extend the background in the content box.

Background Image CSS: Useful Tips

  • You can use gradients as the background images in CSS.
  • It is recommended that you include background-color as the fallback function when background images cannot load.
  • Browsers might optimize performance by not loading images that are behind fully opaque pictures.