My HTML Contains

1)have js file contain java script function

function getRandomInt(min, max)

  return Math.floor(Math.random() * (max - min)) + min;


document.getElementById("logoArea").className += " bg" + getRandomInt(1, 4);

2)in my html code having div like below

from java script it takes random number then append bg"Random number"(e.g.:- bg1) inside div class

**<header class="header">
<div id="logoArea" class="top-header clearfix container bg1">


3)then css file

#logoArea.bg1 {
    background-image: url(../img/bgimages/bg1.png);
#logoArea.bg2 {
    background-image: url(../img/bgimages/bg2.png);
#logoArea.bg3 {
    background-image: url(../img/bgimages/bg3.png);

after that css files pulls images

I'm trying to get a randomly picked background image to appear as the background image for a Div in USERCONTROL.

My Requirements Are:-The background in the header shall allow for random header backgrounds to be pulled from a Home Page Header Backgrounds picture library Pro-grammatically.


I can't post a comment but what is the problem you're having? What is wrong with the code you have? And when should the random background be applied to the div? Is it on load or some event?

<header class="header">
    <div id="logoArea" class="top-header clearfix container"></div>
<script type="text/javascript">
function getRandomInt(min, max)
    return Math.floor(Math.random() * (max - min)) + min;

document.getElementById("logoArea").style.backgroundImage = "url(../img/bgimages/bg" + getRandomInt(1,4)  + ".png)";
| improve this answer | |
  • on load ,Don't know how to set random images programmatically, – Akshay Dattatray Nangare Jun 10 '15 at 13:06
  • are you using jQuery? – IMTheNachoMan Jun 10 '15 at 13:07
  • No, Not using Query , Requirement Mention in Question are given by clients and they wants user Control for that, Compulsory to use their java-script and – Akshay Dattatray Nangare Jun 10 '15 at 13:08
  • Where in SharePoint do you want this? Is this in a WebPart page? A custom page? Can you modify the entire page's HTML or just a part of it? – IMTheNachoMan Jun 10 '15 at 13:20
  • If they want user control then they want the user to be able to change the background instead of it doing onload? – IMTheNachoMan Jun 10 '15 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.