Random Background Image For Background Clip

Question

On my personal site: http://pavelrozman.com/ the background photo reloads on every refresh with some javascript. Then, I stumbled upon a cool clipping mask tutorial on the web.

h1 {
font-family: Arial;
font-size: 5em;
text-align: center;

background-image: url(Galaxy.jpg);

-webkit-background-clip: text;
background-clip: text;

color: rgba(0,0,0,0);

}

I want to use a random image where it says 'Galaxy.jpg' so that ever refresh there's a new image that is clipped over the text.

So far nothing. I'm very new to HTML and CSS and I imagine you could do this with Javascript or PHP, but I'm clueless there. "I've always relied on the kindness of strangers" — user1877401, Mar 13 '13 at 00:14

grapien · Accepted Answer · 2013-03-13T00:43:14.250

1

This is how I would approach the problem, the only solution I can think of will require use of jquery to change the background image.

First I would create an array of the image names that you want to cycle for your backgrounds. I called this variable background.

Jquery Code:

   var background = ["Galaxy","Galaxy2","Galaxy3","Galaxy4","Galaxy5"];
   var randombackground = Math.floor((Math.random()*5)); 
   /*This will generate a random number between 0 and 4, which we will use to access our array, change the 5 to the number of wallpapers that you have*/


$(document).ready(function(){
   $("h1").css("background-image","url('" + background[randombackground] + ".jpg')");
});

The code above will generate a random number which will select a different wallpaper every time the page loads. This is because the random number will change every time the page is loaded. Please note that you will need to have http://jquery.com/ installed for the code to work correctly.

Hope this helps.

edited Mar 13 '13 at 00:43

answered Mar 13 '13 at 00:23

grapien

313
3
10

Thanks a ton for this. I'm out now, but I'll let you know how it goes around 11PM EST. – user1877401 Mar 13 '13 at 00:40
I should be around if you have any problems just let me know. – grapien Mar 13 '13 at 00:42
So I loaded JQuery.min.js in my HTML document, now where/how do I place this code? – user1877401 Mar 13 '13 at 03:08
In the header of your webpage put with the code above pasted within the two script tags. Ensure the script tags are below where you call jquery in your header. – grapien Mar 13 '13 at 03:10

Random Background Image For Background Clip

1 Answers1