Only blur a repeating image in the background?
I have a div with a background image. background css image is set like this:
.resPic1 {
background: url(../css/images/residentialpic1.jpeg) center;
background-size: contain;
}
What I want to know is, if there is a way to blur only duplicate images (duplicate images that are outside the blue lines that I have highlighted in the image), any help is appreciated!
+3
source to share
2 answers
If you have a blurry version of your image, you can achieve this by applying multiple background images to your element:
body {
/* place the blurred image below the normal one */
background-image:
url("https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg"),
url("http://dl.dropboxusercontent.com/s/z3icpq9rkrf4rac/blurred_10px_mermaid.png?dl=0");
/* repeat only the blurred one */
background-repeat: no-repeat, repeat;
background-position: center, center;
background-size: contain;
width: 100vw;
height: 100vh;
}
And if you don't, the little ::before
+ ::after
hack can also:
body{
width: 100vw;
height: 100vh;
margin: 0;
}
body::before, body::after{
content: "";
background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg");
background-position: center;
background-size: contain;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
/* the blurred image */
body::before{
content: "";
background-repeat: repeat;
filter: blur(3px);
}
/* the clear image */
body::after{
content: "";
background-repeat: no-repeat;
z-index: 1;
}
+2
source to share
Small workaround using fixed heights and two different div
s .. Not recommended, however ..
body {
padding: 0;
margin: 0;
background: white;
height: 100%;
width: 100%;
}
.blur-bg {
height: 300px;
}
.bg {
background-image: url('https://lh5.ggpht.com/6IV7BAcqjvjlbtYN27Dbh8-Khc5fEhJJOHxUYG7omxUoW_q8WDwqAeHvCWNwO7bTDg=h900');
position: absolute;
height: 299px;
width: 100%;
filter: blur(2px);
}
.content {
position: relative;
line-height: 1.5;
color: white;
text-align: center;
width: 70%;
background-image: url('https://lh5.ggpht.com/6IV7BAcqjvjlbtYN27Dbh8-Khc5fEhJJOHxUYG7omxUoW_q8WDwqAeHvCWNwO7bTDg=h900');
background-size: cover;
left: 50%;
transform: translateX(-50%);
height: 100%;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6), 2px 2px 1px rgba(0, 0, 0, 0.6), 2px 2px 1px rgba(0, 0, 0, 0.6), 2px 2px 1px rgba(0, 0, 0, 0.6);
font-size: 20px;
}
<div class="blur-bg">
<div class="bg">
</div>
<div class="content">
This
<br>is
<br>a
<br>sample
<br>of
<br>background
<br>image
<br>blurring
</div>
</div>
0
source to share