0

Before you ask, yes, I did search for it. And as far as I can tell, I am doing everything I am supposed to do. Also, I am viewing this in Chrome. Also, I am cascading multiple background images, but that's not the problem because it also doesn't work with just one image.

Here's the CSS code I have:

body#homepage {
height:100vh;
width:100%;
background:
    url(Sexy%20Women/sexy%20woman%201.jpg) top left no-repeat,
    url(Sexy%20Women/sexy%20woman%202.jpg) top left 450px no-repeat,
    url(Sexy%20Women/sexy%20woman%203.jpg) top left 900px no-repeat,
    url(Sexy%20Women/sexy%20woman%204.jpg) top left 1350px no-repeat,
    url(Sexy%20Women/sexy%20woman%205.jpg) top 450px left no-repeat,
    url(Sexy%20Women/sexy%20woman%206.jpg) top 450px left 450px no-repeat,
    url(Sexy%20Women/sexy%20woman%207.jpg) top 450px left 900px no-repeat,
    url(Sexy%20Women/sexy%20woman%208.jpg) top 450px left 1350px no-repeat;
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
}

The HTML:

<body id="homepage"> </body> <!-- yes, no content yet. Just working on background. -->

Any help and advice you can offer would be greatly appreciated. Thank You.

Donald Faulknor
  • 37
  • 6
  • I think the blur works on images (content element) not background-images. maybe try `backdrop-filter: blur(0.8);` – zgood Mar 12 '20 at 17:07

1 Answers1

1

Its because you are trying to apply blur on the body, If you change this to a div it works fine. just wrap everything in your body inside an new div

JSFiddle

HTML:

<div id="homepage"> </div>

CSS::

div#homepage {
height:100vh;
width:100%;
background:
    url(//i.imgur.com/trpMZ1r.jpg) top left no-repeat,
    url(//i.imgur.com/trpMZ1r.jpg) top left 450px no-repeat,
    url(//i.imgur.com/trpMZ1r.jpg) top left 900px no-repeat,
    url(//i.imgur.com/trpMZ1r.jpg) top left 1350px no-repeat,
    url(//i.imgur.com/trpMZ1r.jpg) top 450px left no-repeat,
    url(//i.imgur.com/trpMZ1r.jpg) top 450px left 450px no-repeat,
    url(//i.imgur.com/trpMZ1r.jpg) top 450px left 900px no-repeat,
    url(//i.imgur.com/trpMZ1r.jpg) top 450px left 1350px no-repeat;
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
}
Joshua Jenkins
  • 33
  • 1
  • 6