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("beautiful.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
.png)
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("sunrise.jpg");
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
.png)
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("land.jpg");
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
.png)
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
.png)
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("lake.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
.png)
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("lake.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
.png)
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("light.jpg");
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
.png)
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("bound.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 gocourse</h1>
<p>Where creativity knows no
bounds.</p>
</div>
</body>
</html>
Output
.png)
.png&description=Background size in CSS){kind=link}