Why does it blur my div element (Class survey) instead of my background image

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

I am trying to create a blur effect on my background image that is nested in my body element in my CSS file. Everytime I add the effect, it seems like it’s blurring the div element with the class “survey” instead of the background picture. is there any way I can fix this???

thank you in advance

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta name=viewport,  width=device-width, initial- scale=1.0>
  <title>Sports Survey</title>
  <link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class=survey>
  <header class="header">
    <h1>Your Favorite Sport!</h1>
    <p>A short survey</p>
  </header>
  <hr>
  <main>
    <section>
      <h2>Welcome!</h2>
      <p> 
  </main>
</div>
</body>
</html>


/* file: styles.css */


body {
background-image: url("https://leverageedublog.s3.ap-south-1.amazonaws.com/blog/wp-content/uploads/2019/06/23160820/Career-in-Sports-01.png");
max-width:100%;
filter:blur(8px);
}
.survey {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
margin-top:40px;
}

.header {
text-align:center;
margin:1em auto;
}


  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.63 Safari/537.36

Challenge: Build a Survey Form

Link to the challenge:

2

Would add an img or div element. Then adjust CSS code as such. If you are going to be placing other images on the body than I would suggest an #id for the image element.

body img {
  filter:  blur(8px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.survey {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
margin-top:40px;
}

.header {
text-align: center;
margin:1em auto;
}
1 Like
3

WORKED!!! Thank you so much for your help, I’ll keep that noted for next time :slight_smile:

4

Sorry to bother again! but if you don’t mind, do you how I can add a background color on top of the background picture. I want to add a color on top of it and then lower the opacity on the alpha channel to make some sort of curtain effect. Thank you again! I appreciate your time with this

5

You could add a div with class as seen below to reach your desired effect. Simply look at the code here an adjust it as needed. I would recommend looking up linear-gradient if you don’t know about it already. The color stops in the gradient can be adjusted to get the color you want.


<!-- HTML  Code -->
<div class="bg-div">
</div>
<div class=survey>
  <header class="header">
    <h1>Your Favorite Sport!</h1>
    <p>A short survey</p>
  </header>
  <hr>
  <main>
    <section>
      <h2>Welcome!</h2>
      <p></p>
      </section>
  </main>
</div>
<!-- End of HTML -->

.bg-div  {
  background: linear-gradient(#000000aa, #000000aa), url("https://leverageedublog.s3.ap-south-1.amazonaws.com/blog/wp-content/uploads/2019/06/23160820/Career-in-Sports-01.png") no-repeat center center;
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
  filter: blur(8px);
}

.survey {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
margin-top: 40px;
}

.header {
text-align: center;
margin: 1em auto;
}
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.