Sass: Randomly Pick Background-Image from a List

SASS: randomly pick background-image from a list

The most recent version of Sass (v3.3.0) adds a new random function. If you mix that with a list of images (and a wee bit of variable interpolation), you will have CSS with a randomly selected background image every time Sass is compiled. Example:

$imgKey: random(5);

$list: apple, banana, cherry, durian, eggplant;
$nth: nth($list, $imgKey);

body {
  background-image: "/images/#{$nth}.jpg";
}

Live example: http://sassmeister.com/gist/8966210

As above, the random value will only change when the Sass is compiled, which won't necessarily be every time your page is visited.

Randomly pick mixin

Well, if you change only the paths, another solution is to put these paths in a list, take one at random (using nth() function => see the documentation: http://sass-lang.com/documentation/Sass/Script/Functions.html) and put it as background-image.

Something like this:

$paths: 'foobar', 'barfoo', 'blabla';

@mixin svg($color) {
  background-image: url('data:image/svg+xml;utf8,<svg><g fill="#{$color}"><path d="#{nth($paths, random(length($paths)))}"></svg>');
}

div{
  @include svg(purple);
}

If you do so, you can add as many paths as you want in your list without worrying about putting another @if in your mixin. :)

Random color from array in Sass

Edit: Sass introduced a module system. The random() function is transitioning to math.random(). See the documentation for the function and for the module system for more information.

---

First, I should state a reminder to everyone reading that Sass is precompiled into CSS; you cannot achieve random behavior "at runtime" (i.e. on page load) using Sass.

Sass has a random() function that might interest you:

$colors: red, orange, yellow, green, blue, purple;
$repeat: 20  // How often you want the pattern to repeat.
// Warning: a higher number outputs more CSS.

@for $i from 1 through $repeat {
    li:nth-child(#{length($colors)}n+#{$i}) {
        background: lighten(nth($colors, random(length($colors))), 20%);
    }
}

li {
    list-style: none;
    padding: 1em;
}

This chooses a random index of your $colors array and uses the associated color.

Note: the documentation states that random($limit) "returns a random whole number between 1 and $limit." This includes $limit as a possible value. As a result, if you use nth($colors, random(length($colors) + 1)), you are liable to get an error for using an index out of bounds.

Random background image for a webpage

Your going to need to have an array of images stored in JavaScript like so:

var picArr = [imageSrc1 ,imageSrc2 ,imageSrc3];

After which you'll need some kind of random number that conforms to the amount of image src's you have in the above array.

http://www.w3schools.com/jsref/jsref_random.asp

You'll be using Math.random() here

Then you'll need to create a function that shall be executed when the document loads that changes the src of your background above.

Your final function might look like this:

var picArr = ['src0', 'src1', 'src2', 'src3', 'src4', 'src5', 'src6', 'src7', 'src8', 'src9', ];

var myNumber = Math.floor((Math.random() * 10) + 1);

$(document).ready(function () {
    $("#backgroundImage").attr('src', picArr[myNumber]);
});

---

Related Topics