I'm trying to make it so my Jumbotron image is blurry without is affecting the text that is contained inside the image! here is my index.html file and style.css Thank you very much for your help!
body {
background-image: url(bg1.png);
background-repeat: repeat-x repeat-y;
}
.navbar-brand,
.navbar-nav li a {
line-height: 77px;
height: 77px;
padding-top: 0;
}
.lgpad {
padding-top: 10px;
padding-right: 5px;
}
.jumbotron {
margin-bottom: 0px;
background-image: url(https://scontent.xx.fbcdn.net/v/t1.0-1/p200x200/12717582_1731718593707877_5091666265045953541_n.jpg?oh=0d07c7f60f9490bc8f8621f139570cb3&oe=57A01DA0);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: #DEDDDB;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.bpad {
padding-top: 100px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<title>#</title>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="#">
<img class="lgpad" alt="Brand" src="infenso.gif">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="bpad">
</div>
<div class="container">
<div class="jumbotron">
<h1>#</h1>
<p>#</p>
</div>
</div>
</div>
</body>
</html>Thank you
Just put the image you're blurring in a separate div :
body {
background-image: url(https://i.sstatic.net/dql72.jpg);
background-repeat: repeat-x repeat-y;
}
.navbar-brand,
.navbar-nav li a {
line-height: 77px;
height: 77px;
padding-top: 0;
}
.lgpad {
padding-top: 10px;
padding-right: 5px;
}
body .jumbotron {
margin-bottom: 0px;
position: relative;
background: none;
color: #DEDDDB;
}
.bpad {
padding-top: 100px;
}
.jumbotron .bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(https://i.sstatic.net/1k5j4.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
z-index: -1;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<title>#</title>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="#">
<img class="lgpad" alt="Brand" src="https://i.sstatic.net/yfVE6.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="bpad">
</div>
<div class="container">
<div class="jumbotron">
<div class="bg"></div>
<h1>#</h1>
<p>#</p>
</div>
</div>
</div>
</body>
</html>