CODEWITHSUNDEEP
javascripthtmlcss
MilesBellum
MilesBellum

Reputation: 1

How to change a random background in CSS with refresh

I'm developing a website but I want to set a random background in CSS.

Right now, I have this code CSS:

#bg {
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
    transform: scale(1.0);
    -webkit-backface-visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

    #bg:before, #bg:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #bg:before {
        -moz-transition: background-color 2.5s ease-in-out;
        -webkit-transition: background-color 2.5s ease-in-out;
        -ms-transition: background-color 2.5s ease-in-out;
        transition: background-color 2.5s ease-in-out;
        -moz-transition-delay: 0.75s;
        -webkit-transition-delay: 0.75s;
        -ms-transition-delay: 0.75s;
        transition-delay: 0.75s;
        background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("../../images/overlay.png");
        background-size: auto, 256px 256px;
        background-position: center, center;
        background-repeat: no-repeat, repeat;
        z-index: 2;
    }

    #bg:after {
        -moz-transform: scale(1.125);
        -webkit-transform: scale(1.125);
        -ms-transform: scale(1.125);
        transform: scale(1.125);
        -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
        -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
        -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
        transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
        background-image: url("../../images/bg_01.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 1;
    }

    body.is-article-visible #bg:after {
        -moz-transform: scale(1.0825);
        -webkit-transform: scale(1.0825);
        -ms-transform: scale(1.0825);
        transform: scale(1.0825);
        -moz-filter: blur(0.2rem);
        -webkit-filter: blur(0.2rem);
        -ms-filter: blur(0.2rem);
        filter: blur(0.2rem);
    }

    body.is-loading #bg:before {
        background-color: #000000;
    }

And I made this JS code to change the background:

var images = ['bg_01.jpg',
          'bg_02.jpg', 
          'bg_03.jpg', 
          'bg_04.jpg', 
          'bg_05.jpg', 
          'bg_06.jpg', 
          'bg_07.jpg', 
          'bg_08.jpg', 
          'bg_09.jpg', 
          'bg_10.jpg'];
$('body').css({'background-image' : 'url(../../images/' + images[Math.floor(Math.random() * images.length)] + ')']);

I want to use the JS code in #bg:after, how can I do that? do I need to change something in the js code? the backgrounf works good because I'm using a free template but I want to keep that code because has animations, etc. and I just would like to make it random every refresh.

PS: Sorry, but I'm noob in this.

CODE UPDATED AND WORKING

I've found the solution. First I had to remove the line:

background-image: url("../../images/bg_01.jpg");

From #bg:after block. Then, I changed my javascript code like this:

var images = ['bg_01.jpg',
          'bg_02.jpg', 
          'bg_03.jpg', 
          'bg_04.jpg', 
          'bg_05.jpg', 
          'bg_06.jpg', 
          'bg_07.jpg', 
          'bg_08.jpg', 
          'bg_09.jpg', 
          'bg_10.jpg'];
$('#bg').css({'background-image' : 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

Now, my website change the background every refresh :)

Thanks a lot for your help!

Upvotes: 0

Views: 1345

Answers (1)

username
username

Reputation: 613

Your question is not very clear. I assume that you want to have a div with a random background and transition between image and color.

First you js line should be...

$('body').style.backgroundImage = "url(../../images/" + images[Math.floor(Math.random() * images.length)] + ")";

Here is an example of what I think you want to achieve.

var div = document.getElementById("myDiv");

var images = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg/1200px-Kitten_in_Rizal_Park%2C_Manila.jpg",
"https://www.sdhumane.org/wp-content/uploads/2017/06/10k_nova-0.jpg",
"https://4fi8v2446i0sw2rpq2a3fg51-wpengine.netdna-ssl.com/wp-content/uploads/2016/06/KittenProgression-Darling-week3.jpg",
"http://www.catster.com/wp-content/uploads/2017/12/A-gray-kitten-meowing.jpg"
];

div.onmouseover = function()
{
  div.style.backgroundImage = "url(" + images[Math.round(Math.random() * images.length)] + ")";
}
#myDiv
{
  width: 250px;
  height: 250px;
  background-size: 250px 250px;
}
#colorOverlay
{
  width: 250px;
  height: 250px;
  background: gold;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
#colorOverlay:hover
{
  opacity: 0;
}
<div id="myDiv">
<div id="colorOverlay">
</div>
</div>

(*This example has issues if you change the images too fast because completely loads them again every time.)

It sets a new image when the mouse is hovered over the div. You can instead do it once when the page loads. To fade from color to the image, the only way I think there is is to have two divs, one with the image, one with the color.

Upvotes: 1

Related Questions