The CSS background-size Property
Background images need not appear at their natural dimensions, because background-size can change them.
It accepts a length, a percentage, or one of three keywords: auto, contain and cover.
Background size with pixels
Pixel values shrink the background image here until it is far smaller than the source file.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Size Pixels</title>
<style>
#div1 {
background-image: url("img_flower.jpg");
background-position: right top;
background-repeat: no-repeat;
background-size: 100px 80px;
padding: 20px;
}
</style>
</head>
<body>
<h2>Lorem Ipsum Dolor</h2>
<div id="div1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Background size with contain, cover and auto
auto is what you get without setting anything: the image keeps its original dimensions.
contain resizes the image, up or down, so that it fits within the content area.
cover makes the image big enough to leave no part of the content area uncovered.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Size Keywords</title>
<style>
div {
width: 100%;
height: 200px;
border: 1px solid black;
margin-bottom: 20px;
background-image: url("img_flwr.gif");
background-repeat: no-repeat;
}
#div1 {
background-size: contain;
}
#div2 {
background-size: cover;
}
#div3 {
background-size: auto;
}
</style>
</head>
<body>
<h2>background-size: contain</h2>
<div id="div1"></div>
<h2>background-size: cover</h2>
<div id="div2"></div>
<h2>background-size: auto</h2>
<div id="div3"></div>
</body>
</html>
Define Sizes of Multiple Background Images
When an element has several backgrounds, give background-size a comma-separated list of values.
Example
Each of the three background images here gets its own background-size value.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multiple Background Sizes</title>
<style>
#div1 {
background-image: url("img_tree.gif"), url("img_flwr.gif"), url("paper.gif");
background-position: left top, right bottom, left top;
background-repeat: no-repeat, no-repeat, repeat;
background-size: contain, 150px, auto;
height: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Multiple Background Sizes</h2>
<div id="div1"></div>
</body>
</html>
CSS Full Size Background Image
Styling the <html> element is how you make a background image fill the browser window at all times. The goal is a centered image that scales when it must, fills the page without any white space, and never triggers scrollbars.
Example
On the <html> element, center and fix the background, then let background-size: cover stretch it across the window.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Size Background Image</title>
<style>
html {
background: url("img_man.jpg") no-repeat center fixed;
background-size: cover;
}
body {
color: white;
}
</style>
</head>
<body>
<h1>Full Size Background Image</h1>
<p>This background image covers the entire browser window.</p>
</body>
</html>
CSS Hero Image
A hero image is a large picture with text on top of it, and a <div> with a few background properties is enough to build one.
Example
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hero Image</title>
<style>
.hero-image {
background: url("img_man.jpg") no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1>I am John</h1>
<p>And I'm a Photographer</p>
</div>
</div>
</body>
</html>