Only blur repeated image in background?

Question

i have a div with a background image. the background image css is set as follows:

.resPic1 {
    background: url(../css/images/residentialpic1.jpeg) center;
    background-size: contain;
}

What i want to know is if there is a way to only blur the repeated images (the repeated images that are outside the blue lines i've highlighted in my picture) any help is appreciated!

Answer 1

If you've got a blurred version of your image, you can achieve it by applying multiple background-images on 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, a little ::before+::after hack can do it too :

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;
  }

Answer 2

A small workaround, using fixed heights and two different divs.. May not be recommended though..

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>