I am trying to blur the background image I added in the body, but all the contents are also getting blurred
I am trying to blur the background image I added in the body, but all the contents are also getting blurred. I created two different div, in the parent div I have added the background image and in child I added the content. I saw the same of W3 schools and it worked perfect for them, but the same is not working for me. I am not sure what am I doing wrong.
This is the code I am using -
body {
background-color: #f0f5ff;
}
.background {
background-image: url(background1.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
filter: blur(2px)
}
.navbar {
background-color: #0077be;
/* set the background color */
}
.navbar-brand {
color: white;
/* set the text color */
font-weight: bold;
}
.navbar-nav .nav-link {
color: white;
/* set the text color */
}
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 50px;
}
section img {
width: 40%;
height: auto;
margin-right: 20px;
}
.description {
flex: 1;
font-size: 1.2rem;
color: white;
}
@media screen and (max-width: 768px) {
section {
flex-direction: column;
margin: 20px;
}
section img {
width: 100%;
margin-bottom: 20px;
}
.description {
margin-bottom: 20px;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- navigation bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="header.html">Lake George and Jefferson Project</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="header.html">
<i class="fas fa-home nav-icon"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Analysis.html">
<i class="fas fa-analytics nav-icon"></i>
<span class="nav-text">Analysis</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.html">
<i class="fas fa-info-circle nav-icon"></i>
<span class="nav-text">About Data Set</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div class="background">
<div class="body-content">
<h2>   About Lake George</h2>
<section>
<img src="3.jpg" alt="Image 1">
<div class="description">
<p>Lake George has a surface area of approximately 44 square miles and an average depth of 70 feet, with a maximum depth of 196 feet. The lake is fed by several small streams and drains into the St. Lawrence River via the Richelieu River. The water
quality of Lake George is monitored by the Lake George Association and other organizations, and data shows that the lake has generally good water quality, with low levels of nutrients and pollutants. In terms of recreational use, Lake George
is a popular destination for boating, fishing, and swimming. The New York State Department of Environmental Conservation (DEC) regularly stocks the lake with a variety of fish species, including lake trout, landlocked salmon, and smallmouth
bass. Data on fish populations and catch rates are used to manage the fishery and set regulations on fishing seasons and bag limits. Tourism is a major industry in the Lake George area, and data from the Warren County Tourism Department shows
that the lake attracts millions of visitors each year. The tourism industry generates significant revenue for the local economy, supporting businesses such as hotels, restaurants, and outdoor recreation outfitters.</p>
</p>
</div>
</section>
<h2>   About Jefferson Project</h2>
<section>
<img src="Jefferson.jpg" alt="Image 2">
<div class="description">
<p>Lake George has a surface area of approximately 44 square miles and an average depth of 70 feet, with a maximum depth of 196 feet. The lake is fed by several small streams and drains into the St. Lawrence River via the Richelieu River. The water
quality of Lake George is monitored by the Lake George Association and other organizations, and data shows that the lake has generally good water quality, with low levels of nutrients and pollutants. In terms of recreational use, Lake George
is a popular destination for boating, fishing, and swimming. The New York State Department of Environmental Conservation (DEC) regularly stocks the lake with a variety of fish species, including lake trout, landlocked salmon, and smallmouth
bass. Data on fish populations and catch rates are used to manage the fishery and set regulations on fishing seasons and bag limits. Tourism is a major industry in the Lake George area, and data from the Warren County Tourism Department shows
that the lake attracts millions of visitors each year. The tourism industry generates significant revenue for the local economy, supporting businesses such as hotels, restaurants, and outdoor recreation outfitters.</p>
</p>
</div>
</section>
</div>
</div>
</main>
