0

I'm creating a maintenance page for myself when I need to work on something behind the scenes. Currently, I'm using a JavaScript Random math function to select a number from 1-5 which makes the background random from a list every time you refresh.

All I want to do is add a CSS blur filter to this image but I'm unsure on how to go about it.

My JavaScript:

<script type="text/javascript"> 
    function backgr() { 
        var backimg = ["bg1.jpg","bg2.jpg","bg3.jpg","bg4.jpg","bg5.jpg"]; 
        var randimg = Math.floor(Math.random()*5); 
        document.body.background = backimg[randimg]; 
    } 
</script>

HTML start, I have to add that the filter should not touch anything in the container class.

<body onload="backgr()">
<div class="container">

The CSS blur filter (w3):

#settopickedbackground {

-webkit-filter: blur(5px);

filter: blur(5px);

}

I've used the blur filter on individual backgrounds but I would like to use it after random math has competed.

Apologies if the code looks weird, posted on mobile.

Thanks!

LegeNd
  • 1
  • Possible duplicate of [How to apply a CSS 3 blur filter to a background image](https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image) – Luca Kiebel Sep 14 '18 at 16:16
  • @Luca thanks for posting, not sure if that's the same solution to my JavaScript method as I want to use multiple images – LegeNd Sep 14 '18 at 16:19
  • 2
    You only want to use one image at a given time, right? Apply this CSS and Markup, and then just change the background image with JS – Luca Kiebel Sep 14 '18 at 16:21
  • I don't understand what role JavaScript plays here and I'm also unsure about the "do not touch container" part. Do you mean that you want to have a transparent box where the background image is not blurred? – Álvaro González Sep 14 '18 at 16:21
  • @Luca That is what I was looking for, I just don't know how to style it or what to use in the CSS to apply it, since everything I tried makes the whole page blurry. Yes, I test that out in a short while – LegeNd Sep 14 '18 at 16:25
  • @Alvaro everything in the container is a window which I don't want the filter to apply. Just the background image which gets set by JS – LegeNd Sep 14 '18 at 16:28
  • @LucaKiebel mentioned duplicate thread, it has the solution. Follow https://codepen.io/aniketpant/pen/DsEve this one.. that has separate background div (not body). All you have to do is set background image of that new div instead of body. –  Sep 14 '18 at 16:40
  • Oh. Appologies on my end, didn't see that one there. – LegeNd Sep 14 '18 at 16:41

0 Answers0