CODEWITHSUNDEEP
htmlcss
Thrys5
Thrys5

Reputation: 71

Stop everything From blurring in HTML CSS

/* Sass Document */

* {
  box-sizing: border-box;
}
#TopBanner {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  top: 10px;
  left: 0;
  position: absolute;
  margin-left: 20px;
  margin-right: 20px;
  right: 0;
  z-index: 5;
  padding: 0 10px;
}
#Container {
  background-color: #CFBDBD;
  align-content: center;
  align-items: center;
  align-self: center;
  height: auto;
  width: 80%;
  display: block;
  margin-left: auto;
  padding: 10px;
  margin-right: auto;
  border: thin;
  z-index: 3;
}
#backgroundimage {
  background-color: #D52D32;
  background-size: cover;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  height: 800px;
  left: 0;
  position: relative;
  right: 0;
  z-index: 1;
}
#Logo {
  border-radius: 15px;
  position: absolute;
  left: 0.5%;
  z-index: 2;
}
Nav ul {
  z-index: 2;
  list-style-type: none;
  list-style-position: inside;
}
Nav li {
  z-index: 2;
  display: inline;
  height: 90px;
  width: 180px;
}
/*# sourceMappingURL=css.css.map */
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/css.css">
  <title></title>
</head>
<div id="backgroundimage">
  <div id="TopBanner">
    <nav>
      <ul>
        <li>
          <img id="Logo" src="images/AWDLogo.png">
        </li>
        <p>Contact Us At:
          <a href="" target="_top"></a>
          <br>Call:
          <a href=""></a>
        </p>
      </ul>
    </nav>
  </div>

  <body>
    <div id="Container">
    </div>
  </body>
</div>

</html>

This is my code for my website. I have been trying to blur only the background, however it blurs everything. It appears that the z-index is not working. Any help on how to make everything else fine, and just the background blur is appreciated,

Thank you.

Upvotes: 0

Views: 68

Answers (2)

Jake C.
Jake C.

Reputation: 81

Scott's answer works just fine,

Another solution would be this already answered question

Upvotes: 1

Scott
Scott

Reputation: 5369

Filters affect everything within the parent element, as expected, so you need to move the filter outside anything that shouldn't be affected.

In your case, you can just close <div id="backgroundimage"></div> in the "top" of the document.

/* Sass Document */

* {
  box-sizing: border-box;
}
#TopBanner {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  top: 10px;
  left: 0;
  position: absolute;
  margin-left: 20px;
  margin-right: 20px;
  right: 0;
  z-index: 5;
  padding: 0 10px;
}
#Container {
  background-color: #CFBDBD;
  align-content: center;
  align-items: center;
  align-self: center;
  height: auto;
  width: 80%;
  display: block;
  margin-left: auto;
  padding: 10px;
  margin-right: auto;
  border: thin;
  z-index: 3;
}
#backgroundimage {
  background-color: #D52D32;
  background-size: cover;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  height: 800px;
  left: 0;
  position: relative;
  right: 0;
  z-index: 1;
}
#Logo {
  border-radius: 15px;
  position: absolute;
  left: 0.5%;
  z-index: 2;
}
Nav ul {
  z-index: 2;
  list-style-type: none;
  list-style-position: inside;
}
Nav li {
  z-index: 2;
  display: inline;
  height: 90px;
  width: 180px;
}
/*# sourceMappingURL=css.css.map */
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/css.css">
  <title></title>
</head>
<div id="backgroundimage"></div>
  
  <div id="TopBanner">
    <nav>
      <ul>
        <li>
          <img id="Logo" src="images/AWDLogo.png">
        </li>
        <p>Contact Us At:
          <a href="" target="_top"></a>
          <br>Call:
          <a href=""></a>
        </p>
      </ul>
    </nav>
  </div>

  <body>
    <div id="Container">
    </div>
  </body>

</html>

You also have some funky HTML (body isn't in <body>), but this seems to solve your problem.

Upvotes: 3

Related Questions