1

I am looking if there is way to blur the repeated part of a background image so that if it is background position'ed center than the side of image itself are blurry?

Faisal Ashfaq
  • 2,545
  • 4
  • 28
  • 41
  • There is a way of blurring stuff with css but the support is terrible and it's really heavy for the browser. Another approach would be to use the canvas element to blur the repeated part but in this case I'd suggest you just make the background always expand to the size of the container https://css-tricks.com/perfect-full-page-background-image/ – Jonas Grumann May 12 '16 at 13:12
  • If you are bringing in an image that you want blurred then bring in a blurred version of the image. If you are not un-blurring the image at any point. Also you could fade it out a little bit by changing `opacity` – Andrew May 12 '16 at 13:16
  • http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image – Zubair sadiq May 12 '16 at 13:20
  • 1
    If this only has to be static and not animated or something, then I would simply go with [multiple background images](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds) - a blurry version that gets repeated, and on top of that the normal one, not repeated. No need to involve jQuery if you really want something that simple. – CBroe May 12 '16 at 20:08
  • @CBroe now that's something I find helpful. Thanks! – Faisal Ashfaq May 13 '16 at 06:04
  • O.k., I added it as a (short) answer. – CBroe May 13 '16 at 08:22

1 Answers1

1

If this only has to be static and not animated or something, then I would simply go with multiple background images - a blurry version that gets repeated, and on top of that the normal one, not repeated. (background-position set to the same for both.)

No need to involve jQuery if you really want something that simple.

CBroe
  • 91,630
  • 14
  • 92
  • 150