CSS Background Colors
Here we are going to see different properties of CSS background
Photo by Robert Katzki on Unsplash
While designing the web page one of the most important things is that we can have a very good and attractive background that can enhance the appearance of the site.
This property can help to make clear specifications that which option is present in that
We can give background color in this format:
RGB value
Color in the name of words
Hexadecimal values
Let's see the example where we are giving all the values to them:
<!DOCTYPE html>
<html>
<head>
<title>Background Color Example</title>
<style>
.my-div {
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.rgb-div {
background-color: rgb(0, 128, 0);
margin-bottom: 20px;
}
.hsl-div {
background-color: hsl(240, 100%, 50%);
}
</style>
</head>
<body>
<div class="my-div">Color Keyword (Red)</div>
<div class="rgb-div">RGB Value (Green)</div>
<div class="hsl-div">HSL Value (Blue)</div>
</body>
</html>
OUTPUT:
It is not necessary that we always use colors in background we can use images in background.
EXAMPLE:
INPUT:
<!DOCTYPE html>
<html>
<head>
<title>Background Color Example</title>
<style>
.my-div {
width: 200px;
height: 200px;
background: url("https://plus.unsplash.com/premium_photo-1673306778968-5aab577a7365?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YmFja2dyb3VuZCUyMGltYWdlfGVufDB8fDB8fHww");
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="my-div">Background</div>
</body>
</html>
OUTPUT:
We can give Background Attachment where we can keep the position of the image of image as fixed, local, inherit etc.
This CSS property can support multiple background images. We can specify a different value of the background-attachment property for each background-image, separated by commas.
Syntax
background-attachment: scroll | fixed | local | initial | inherit;
The values of this property are defined as follows.
Background attachment helps us to make different effects such as:
Parallex method
Performance Considerations
Shorthand property
Multiple background
We can assign the background-size to our webpage with different porperties.
The assigned values can be in the form of:
Pixels
Percentage
Inherit
Pixels for height and width
Cover
Contain, etc.
First let us understand some terms
Cover:
Here the image will cover the container completely without leaving any space.
For example
Input:
<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>
OUTPUT:
Similarly, we can use property of contain.
Let's see one more example.
<!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>
