CSS background: background image stretching to fill
CSS background: Background image stretch and fill
Background https://coder-cafe.com/wp-content/uploads/2025/09/images are a crucial element in web design, adding beauty and personality to a page. In CSS, we can use the background property to set a background image and control how it displays. This article will detail how to use the background property in CSS to achieve a stretch-fill background image effect.
1. Background Image Stretch to Fill the Entire Element
Sometimes we want a background image to completely cover an element, regardless of the element’s size. This can be achieved using the background-size property.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Stretch</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png');
background-size: cover;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Output:
In the example above, we create a div element with a width of 300px and a height of 200px, set the background image to bg.jpg, and then use background-size: cover; to stretch the background image to fill the entire element. After running the code, you can see that the background image completely covers the entire div element.
2. Background Image Stretch to Fill the Entire Page
Sometimes, we want a background image to completely cover the entire page, regardless of page size. This can be achieved using the background-size property and a value of 100% 100%.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Stretch</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url('https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png');
background-size: 100% 100%; }
</style>
</head>
<body>
</body>
</html>
In the example above, we set the background image of the body element to bg.jpg and then use background-size: 100% 100%; to stretch the background image to fill the entire page. When you run the code, you’ll see that the background image completely covers the page.
3. Background image stretched horizontally, centered vertically
Sometimes we want the background image to stretch horizontally to fill the entire page, but be centered vertically. This can be achieved using the background-size property and the center value.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Stretch</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png');
background-size: auto 100%;
background-position: center;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Output:
In the example above, we create a div element with a width of 300px and a height of 200px, set the background image to bg.jpg, and use background-size: auto 100%; to stretch the background image horizontally and background-position: center; to center the background image vertically. After running the code, you’ll see that the background image stretches horizontally to fill the image and is centered vertically.
4. Background Image Stretches Vertically, Centers Horizontally
Sometimes, we want a background image to stretch vertically but be centered horizontally. This can be achieved using the background-size property and the center value.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Stretch</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png');
background-size: 100% auto;
background-position: center; }
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Output:
In the example above, we create a div element with a width of 300px and a height of 200px, set the background image to bg.jpg, and then use background-size: 100% auto; to make the background image stretch vertically. background-position: center; to center the background image horizontally. After running the code, you’ll see that the background image stretches vertically to fill the image and is horizontally centered.
5. Background Image Tiling
In addition to stretching to fill the image, we can also tile the background image. This can be achieved using the background-repeat property.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Repeat</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png');
background-repeat: repeat;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Output:
In the example above, we create a div element with a width of 300px and a height of 200px, set the background image to bg.jpg, and then use background-repeat: repeat; to tile the background image. After running the code, you can see that the background image is tiled both horizontally and vertically.
6. Background Image Tiled Horizontally, Centered Vertically
Sometimes, we want a background image to be tiled horizontally but centered vertically. This can be achieved using the background-repeat and background-position properties.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Repeat</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png');
background-repeat: repeat-x;
background-position: center;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Output:
In the example above, we create a div element with a width of 300px and a height of 200px and set the background image to bg.jpg. We then use background-repeat: repeat-x; to tile the background image horizontally and background-position: center; to center the background image vertically. After running the code, you’ll see that the background image is tiled horizontally and centered vertically.
7. Background Image Tiled Vertically and Centered Horizontally
Sometimes, we want a background image to tile vertically but be centered horizontally. We can achieve this using the background-repeat and background-position properties.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Repeat</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png');
background-repeat: repeat-y;
background-position: center;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Output:
In the example above, we create a div element with a width of 300px and a height of 200px and set the background image to bg.jpg. We then use background-repeat: repeat-y; to tile the background image vertically and background-position: center; to center the background image horizontally. After running the code, you’ll see that the background image is tiled vertically and centered horizontally.
8. Tiled and Fixed Background Image
Sometimes, we want a background image to remain fixed while scrolling, while also tiling. We can use the background-attachment property to achieve this.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Fixed</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url('https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png');
background-repeat: repeat;
background-attachment: fixed; }
</style>
</head>
<body>
</body>
</html>
In the example above, we set the background image of the body element to bg.jpg. We then use background-repeat: repeat; to make the background image tile, and background-attachment: fixed; to make it fixed. After running the code, you’ll see that the background image remains fixed and tiles as the page scrolls.
9. Tiling and Repeating Background Images
Sometimes, we want a background image to repeat as the page scrolls, rather than being fixed. We can achieve this using the background-attachment property.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Scroll</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url('https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png');
background-repeat: repeat;
background-attachment: scroll; }
</style>
</head>
<body>
</body>
</html>
In the example above, we set the background image of the body element to bg.jpg. We then use background-repeat: repeat; to repeat the background image, and background-attachment: scroll; to scroll the background image as the page scrolls. After running the code, you can see that the background image repeats as the page scrolls.
10. Background Image Fixed and Stretchable
Sometimes, we want the background image to remain fixed as the page scrolls, while also stretching to fill the entire page. This can be achieved by combining the background-attachment and background-size properties.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Fixed and Stretch</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url('https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png');
background-size: cover;
background-attachment: fixed; }
</style>
</head>
<body>
</body>
</html>
In the example above, we set the background image of the body element to bg.jpg. We then use background-size: cover; to stretch the background image to fill the entire page, and background-attachment: fixed; to keep it fixed. After running the code, you can see that the background image remains fixed when the page scrolls and stretches to fill the entire page.