Mike Adamski Mike Adamski - 1 month ago 15
CSS Question

I want a blurred background image with overlay text

So, I am taking the jumbotron out of the container because I want it to be full width. But when I apply text to the jumbotron it blurs it out as well. I tried doing the opposite and throwing my background image in a separate but couldn't manage to make it take up the full space like I had it before. Thoughts?

My codepen project...



html, body {
height: 100%; width: 100%;
}

.navbar-nav > li {
padding: 0px 25px 0px 40px;
margin: -15px 0px 0px 0px;
top: -25px; right: 30px;
}

.jumbotron {
width: 100%;
}

.jumbotron {
background:url("http://www.incimages.com/uploaded_files/image/1940x900/software-computer-code-1940x900_35196.jpg");
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
-webkit-filter: blur(5px);
filter: blur(5.5px);
width: 100%;
}

p {
color: white;
}

<body>
<!-- NAVIGATION BAR -->
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-center">Michael Adamski <br><span class="sub-brand">- Web Developer -</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" id="navbar-list">
<ul class="nav navbar-nav navbar-right">
<li a href="home" class="active">Home</li>
<li a href="#about">About</li>
<li a href="portfolio">Portfolio</li>
<li a href="Contact">Contact</li>
</ul>
</div>
</div>
</nav>
<!-- End Navigation Bar -->

<!-- Header -->
<div class="jumbotron">
<div class="container">
<h1> This is my Page! </h1>
<p> This is an example of what I can do with my newfound knowledge</p>







</body>




Answer

You can do this with a simple pseudo class - working fiddle

The idea is to put the background into it's own pseudo element so the blur wont effect the children of the .jumbotron div. Pay particular attention to the z-index and position settings, as they place the background behind the content.

.jumbotron {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.jumbotron .container {
  position: relative;
  z-index: 2;
  color: #ffffff;
}
.jumbotron:after {
  content:"";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;  
  background:url("http://example.com/linktoimage.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(5.5px);
  transform: scale(1.1);
}

Also notice the transform: scale(1.1);, this will make the background slightly larger than the container so you don't get the 'white' fade out towards the edges. The wrapper .jumbotron then has overflow: hidden; to hide the image overflow.