<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="content"> <div class="overlay"></div> <div class="opacity"> <div class="image"> <img src="images/zwemmen.png" alt="" /> </div> <div class="info"> a div wih all sort of information </div> </div> </div>

.content{ float: left; width: 100%; } .content .overlay{ background-image: url('images/zwemmen.png'); height: 501px; -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); z-index:0; } .opacity{ background-color: rgba(5,98,127,0.9); height:100%; overflow:hidden; position:relative; z-index:10; }