Background size in CSS
Introduction
The background-size property allows us to control the size of a background image. We can adjust the image to align, stretch, or fit within the available space. There are various ways to define the background-size property using different syntaxes. This property can be set using values and unit measurements.
For unit values, we can specify the size in percentages or pixels. Additionally, we can use global values to define the size. Here's an example of how to apply it using a global value.
.card-hero {
background-size: cover, 30%, 300px 250px, inherit;
}
Keyword Values
We can use the keyword values cover and contain to adjust the background size. These keywords allow us to change the size of the background image effectively.
Cover
We can use the cover keyword to set the background size. When the background size is defined as cover, the image will fully cover the container without leaving any empty space. This ensures the image scales to fit the entire screen.
Here’s an example to illustrate this.
Example 1
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.background-container {
position: relative;
width: 100vw;
height: 100vh;
background-image: url("img2.jpg");
background-size: cover;
background-position: center;
text-align: center;
color: white;
}
.background-container h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<div class="background-container">
<h1>Welcome to Nature's Beauty</h1>
</div>
</body>
</html>
Output
Explanation
In the code above, the background-size property is set to cover, ensuring that the image scales appropriately and fills the entire container without leaving any empty spaces.
Contain
We can set the background size using the contain keyword. If the background-size is set to contain, the image will resize completely, ensuring that it remains fully visible. This scaling ensures the image fits within the container without being cropped.
Let's explore this with the example below.
Example 2
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.background-container {
position: relative;
width: 100vw;
height: 100vh;
background-image: url("https://media.istockphoto.com/id/1066602804/photo/idyllic-forest-at-sunrise.jpg?s=612x612&w=0&k=20&c=pdvtxNoKnouLEgIexWQua1bs0bYyQuccMtCHcPloQbs=");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
text-align: center;
color: white;
}
.background-container h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<div class="background-container">
<h1>Welcome to Tranquil Forest</h1>
</div>
</body>
</html>
Output
Explanation
In the code above, we set the background-size to contain, ensuring the image fits inside the .background-container while keeping its aspect ratio intact. The background-repeat: no-repeat property prevents the image from repeating.
Unit Values
We can also assign a unit value to the background-size property. These unit values can be defined in pixels or percentages. Below are some examples demonstrating how to implement unit values for this property.
.card-hero {
background-size: 15%;
}
.card-hero {
background-size: 400px;
}
.card-hero {
background-size: 30vw;
}
Example 3
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.background-container {
position: relative;
width: 100vw;
height: 100vh;
background-image: url("https://media.istockphoto.com/id/173593840/photo/vast-dry-land.jpg?s=612x612&w=0&k=20&c=LJd25zcGE5FNqVGasVliRW78af0Fu7RQixWa0EN7Bqw=");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
text-align: center;
color: white;
}
.background-container h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<div class="background-container">
<h1>Exploring Vast Horizons</h1>
</div>
</body>
</html>
Output
Explanation
In the code above, we can modify the percentage values in the background-size property to manage the image's width and height relative to the container.
Global Values
We can also use some global values in the background-size property, which include the following.
Inherit
Using this keyword, we can change the property of an element to match that of its parent element. In other words, this situation demonstrates the concept of inheritance.
Example 4
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.container {
width: 300px;
height: 200px;
background-image: url("img2.jpg");
background-size: inheri; /* Inherits the background size from the parent */
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 150px;
height: 100px;
background-color: rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Output
Explanation
In the code above, we've placed a <div> tag inside another <div> tag. The background-size: inherit; property in the .container class makes the background image of the container inherit the size from its parent, which is the body element. The body element has a light gray background color.
Initial
Using this keyword, we can reset the element to its initial value by specifying that value. It also includes some default settings. To clarify, let's look at an example.
Example 5
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.hero {
position: relative;
height: 100vh;
background-image: url("https://img.freepik.com/premium-photo/beautiful-wooden-path-plitvice-lake-croatia_31965-3194.jpg");
background-size: initial; /* Uses the initial size of the image */
background-position: center;
background-repeat: no-repeat;
color: white;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero-content {
padding: 20px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 10px;
}
.hero p {
font-size: 1.2rem;
}
</style>
<title>Initial Background Size Example</title>
</head>
<body>
<div class="hero">
<div class="hero-content">
<h1>Welcome to gocourse</h1>
<p>Discover Amazing Designs</p>
</div>
</div>
</body>
</html>
Output
Explanation
In the code above, we have defined a hero class where the background size is set to initial. This setting keeps the background image at its original size. The content is centered both vertically and horizontally. Additionally, a semi-transparent background and rounded corners are used to enhance the design's elegance.
Unset
The unset property can be used to remove both initial and inherited values. If the property is set to inherit, the unset property will act as inherit. If it isn't set to inherit, then the unset property will act as initial. Let's clarify this with the example below.
Example 6
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
width: 400px;
height: 300px;
background-image: url("https://img.freepik.com/premium-photo/beautiful-wooden-path-plitvice-lake-croatia_31965-3194.jpg");
background-size: unset; /* Reset the background size */
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0.8;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
}
.content h1 {
margin: 0;
font-size: 24px;
}
.content p {
margin: 10px 0;
font-size: 16px;
}
</style>
<title>Background Size Example</title>
</head>
<body>
<div class="container">
<div class="overlay"></div>
<div class="content">
<h1>Welcome to gocourse</h1>
<p>Discover a world of creativity and inspiration.</p>
</div>
</div>
</body>
</html>
Output
Explanation
In the code above, the background-size property is set to unset, which means the background image will display at its original size. The design features a centered container that includes an overlay and content. The overlay adds a semi-transparent background to enhance text readability, while the content is positioned at the center of the container.
One value
When only one value is needed in the code, you should use a single value. If you specify one value, the other value will automatically be set to auto. Let’s illustrate this with an example.
Example 7
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
background-image: url("https://img.freepik.com/premium-photo/creative-mind-3d-illustration-with-light-bulb-generative-ai_549702-683.jpg?w=2000");
background-size: 70%; /* Sets the background size */
background-repeat: no-repeat;
background-position: center;
font-family: Arial, sans-serif;
}
.content {
text-align: center;
padding: 2rem;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
font-size: 2.5rem;
margin-bottom: 1rem;
}
p {
color: #666;
font-size: 1.2rem;
}
</style>
<title>Background Size Percentage Example</title>
</head>
<body>
<div class="content">
<h1>Welcome to gocourse</h1>
<p>Where imagination meets design.</p>
</div>
</body>
</html>
Output
Explanation
In the code above, the background-size property is set to 70%, meaning the background image will occupy 70% of the width of the entire webpage while keeping its aspect ratio intact.
Two values
If we assign two values to the background-size property, it will control both the width and height of the background image. The first value specifies the width, and the second value determines the height. Here's an example to illustrate this.
Example 8
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
background-image: url("https://img.freepik.com/premium-photo/abstract-fusion-kaleidoscope-colors-shapes-where-creativity-knows-no-bounds_884630-1614.jpg");
background-size: 60% 80%; /* Specifies the width as 60% and the height as 80% */
background-repeat: no-repeat;
background-position: center;
font-family: Arial, sans-serif;
}
.content {
text-align: center;
padding: 2rem;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
font-size: 2.5rem;
margin-bottom: 1rem;
}
p {
color: #666;
font-size: 1.2rem;
}
</style>
<title>Background Size Two-Value Example</title>
</head>
<body>
<div class="content">
<h1>Welcome to javaTpoint</h1>
<p>Where creativity knows no bounds.</p>
</div>
</body>
</html>
Output
Explanation
In the above code, we have set the background-size to 60% and 80%. The first value (60%) makes the background image's width 60% of the webpage, while the second value (80%) sets the image's height to 80% of the webpage.
