Background Size Part 1
We are going to see different background values that can be used to make the website more easily.
Photo by Arnel Hasanovic on Unsplash
Table of contents
Introduction:
In this blog we are trying to cover the topic is background size where we will be seeing some of the different ways through which we can use background size.
We can set the property of background-size property with the help of values and unit values.
The different types which we can use are:
Percentage
Pixel
Inherit
.card-hero{
background-size: cover| 30%| 300px 250px| inherit
}
Different values that can be used are-
COVER
<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://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-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>
Contain:
<!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://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.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>
Here we see that when we used the property cover then the image had completely covered the background of the page on comparing when we the content contain in the background attachment then only the image is using the required area only and remaining area is blank.
Unit Values
We can also set the value of the background-size property in the form of a unit value. The unit value contains the value in the form of a pixel or percentage. Below are a few snippets that explain the implementation of the unit value as the property value.
.card-hero{
background size: 15%;
}
.card-hero{
background-size: 400px;
}
.card-hero{
background-size: 30vw;
}