CODEWITHSUNDEEP
javascripthtmlcss
schtocker
schtocker

Reputation: 35

Random Image in CSS background in Tumblr theme

This question may have been asked before but I'm a complete HTML noob and none of the answers I have found have helped me.

In my Tumblr theme, the header is set like this:

.siteHeader {
        {block:ifShowHeaderImage}
        background: url({HeaderImage}) no-repeat center center {block:ifFixedHeaderBackground}fixed{/block:ifFixedHeaderBackground};
        background-size: cover;
        {/block:ifShowHeaderImage}
        color: {color:Header Text};
    }

with {HeaderImage} referring to Tumblr's preset account header image that exists within the Tumblr infrastructure. I want the header image on my actual theme to randomise across multiple images that are already hosted on Tumblr and I have the direct URLs for.

Could someone please walk me through how to implement this? I've found plenty of Javascript scripts but they only work for replacing <img src> and plenty of PHP scripts but Tumblr does not support those.

Thanks in advance.

Upvotes: 1

Views: 883

Answers (1)

Captain Quirk
Captain Quirk

Reputation: 376

You can use jquery to change CSS parameters.

 $('.siteHeader').css( "background-image", "url(yourURL)" );

or if it's a variable 

 $('.siteHeader').css( "background-image", "url(" + yourURLVariable + ")" );

This is a complete example with an array. If you use this, ignore anything above here.

 // Fill in the URL to your images here in place of 'url1', 'url2' and so on
 var urlArray = [
   'url1',
   'url2'
 ];

 // Script selects a random number here on it's own
 var randomNumber = Math.floor(Math.random() * urlArray.length);
 // Script now sets the background-image css with jQuery here
 $('.siteHeader').css( "background-image", "url(" + urlArray[randomNumber]+ ")" );

Upvotes: 3

Related Questions