CODEWITHSUNDEEP
htmlcss
Tim
Tim

Reputation: 175

CSS - Navbar gets unblurred when text is added

I'm trying to get a blurry navbar and I did, but when I add text to it, the blur disappears.

What am I doing wrong? Can someone review and help?

body {
  background-image: url(https://i.imgur.com/TFOYnCi.jpg);
}

#topbar {
  background: #2e000eb7;
  width: 100%;
  height: 60px;
  overflow: hidden;
}

#topbarbackground {
  height: 100%;
  width: 100%;
  background-image: url("https://i.imgur.com/TFOYnCi.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-filter: blur(30px);
  -moz-filter: blur(30px);
  -o-filter: blur(30px);
  -ms-filter: blur(30px);
  overflow: hidden;
}

#logo {
  color: white;
  font-size: 50px;
}
<div id="topbar">
  <!--
      Bar gets blurry when this is added
    <a id="logo">Title</a>
    -->
  <div id="topbarbackground">
  </div>
</div>

Alternative link to demo

Upvotes: 0

Views: 92

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Added these styles

#topbar {
  position: relative;
}

#topbarbackground {
  position: absolute;
  top: 0;
}


body {
  background-image: url(https://i.imgur.com/TFOYnCi.jpg);
}

#topbar {
  background: #2e000eb7;
  width: 100%;
  height: 60px;
  overflow: hidden;
  position: relative;
}

#topbarbackground {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: url("https://i.imgur.com/TFOYnCi.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-filter: blur(30px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  overflow: hidden;
}

#logo {
  color: white;
  font-size: 50px;
}
<div id="topbar">

  <a id="logo">Title</a>
  <div id="topbarbackground">
  </div>
</div>

codepen

Upvotes: 2

Related Questions