TL;DR – You set CSS background images for HTML elements by using the background-image property or the background shorthand.
Contents
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:
#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.
#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:
#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:
#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.
#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.
#example1 {
background: url('image.png') left top no-repeat, url('other_image.png') right bottom no-repeat;
background-size: 100px, 150px;
}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.
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
fixedposition for it. - Set the
background-sizetocover.
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.
#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:
#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.
#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-coloras the fallback function when background images cannot load. - Browsers might optimize performance by not loading images that are behind fully opaque pictures.