I want a blurred background image with overlay text
Question
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 <div> but couldn't manage to make it take up the full space like I had it before. Thoughts?
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>
2 answers
solution1
3 ACCPTED 2016-10-14 23:17:23
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.
solution2
0
A possible solution is to replace the jumbotron by a div inside of which you place your heading, paragraph, and an image:
#bg { position: absolute; height: 100vh; background-size: cover; background-repeat: no-repeat; -webkit-filter: blur(5px); filter: blur(5.5px); max-width: 100%; } #header { position: absolute; top: 15%; width: 100%; } #header h1 { margin-top: 20%; } #header p { color: #fff; margin-top: 25%; } #header p, #header h1 { position: absolute; left: 50%; transform: translateX(-50%); color: #fff; z-index: 100; }
<div id="header"> <h1> This is my Page! </h1> <p> This is an example of what I can do with my newfound knowledge</p> <img id="bg" src="http://www.incimages.com/uploaded_files/image/1940x900/software-computer-code-1940x900_35196.jpg"> </div>
You may need to adjust the padding and margin for the navigation.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.