0

I have setup a page with a blurred background, however I am getting a white border. I used the first answer for this question: Is it possible to use -webkit-filter: blur(); on background-image? however, it gives me a white blur around the edge. Is it possible to remove this? I have tried scaling but to no avail:

html:before {
  content: "";
  position: absolute;
  background: url(<?php echo $image ?>);
  background-size: cover;
  z-index: -1; /* Keep the background behind the content */
  height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */

  /* don't forget to use the prefixes you need */
  transform: scale(5);
  transform-origin: top left;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
html {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  height: 100%;
}
Community
  • 1
  • 1
user3608238
  • 415
  • 1
  • 5
  • 14

1 Answers1

3

may be better to use the text-shadow or box-shadow

like this 

-webkit-box-shadow: 0px 0px 19px 0px rgba(0, 106, 154, 1);
-moz-box-shadow:    0px 0px 19px 0px rgba(0, 106, 154, 1);
box-shadow:         0px 0px 19px 0px rgba(0, 106, 154, 1);
Alex Wilson
  • 2,421
  • 11
  • 13