-2

So im trying to blur the image chosen by the script with css, to use it as website background

below is my random image script.

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg', 'image6.jpg', 'image7.jpg', 'image8.jpg', 'image9.jpg', 'image10.jpg', 'image11.jpg', 'image12.jpg', 'image13.jpg', 'image14.jpg', 'image15.jpg', 'image16.jpg', 'image17.jpg', 'image18.jpg', 'image19.jpg', 'image20.jpg', 'image21.jpg'];
$('html').css({'background-image': 'url(css/BGS/' + images[Math.floor(Math.random() * images.length)] + ')'});

I want it to blur the background image.

Syed mohamed aladeen
  • 6,507
  • 4
  • 32
  • 59
janflano
  • 1

1 Answers1

0

You can use a CSS3 Filter.

filter: blur(5px);

Add the image to a div and then add blur to that div?

JensW
  • 442
  • 2
  • 12