CODEWITHSUNDEEP
javascripthtmlcssimagebackground
Adam Feoras
Adam Feoras

Reputation: 47

How can I use a javascript variable as a background in an embedded style sheet?

What I'm trying to do this evening is to get my website to load a random background image every time you refresh the page.

Earlier in this project, I tried to get my background to interact with window size and screen resolution like this website (for example), and succeeded (you can see my code in the "html,body" selector in the embedded style sheet).

That was when I only used background1.jpg; now I want to randomly switch between several. I added the script below my title tag and I replaced the body tag with some script as well. This is what I'm working with now.

If I delete the background-related material from my style sheet, I succeed in randomizing the background, but that formatting is lost, which isn't acceptable. If I leave it as you see here, I retain the formatting, but fail to randomize. I want to have my cake and eat it, too. I've hit a wall and any help would be greatly appreciated.

<head>
      <title>Welcome to Cuhteekaloo!</title>

      <SCRIPT LANGUAGE="JAVASCRIPT">
          var bgRand = Math.round(Math.random() * 5)
          bgOpt = new Array(6);
          bgOpt[0] = "background1.jpg";
          bgOpt[1] = "background2.jpg";
          bgOpt[2] = "background3.jpg";
          bgOpt[3] = "background4.jpg";
          bgOpt[4] = "background5.jpg";
          bgOpt[5] = "background6.jpg";
          var bgCurr = bgOpt[bgRand];
      </SCRIPT>

      <link rel="stylesheet" type="text/css" href="cuhteekaloo.css"/>
      <link rel="icon" type="image/jpg" href="jack.jpg"/>

      <style type="text/css">
          html,body {margin:0; padding:0; height:100%; overflow-y:hidden;   
          background: url(background1.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;}
          body  {color:white;}
          img       {border:3px white solid;}
          p     {text-align:justify;}
          a:link, a:visited {color:white;}
          a:hover, a:active {color:orange;}
          .center   {text-align:center; display:block;}
      </style>
</head>

<script language="JAVASCRIPT">
document.write('<body background="' + bgCurr + '" text="white">')
</script>

Upvotes: 0

Views: 2261

Answers (1)

Noahb32
Noahb32

Reputation: 73


I hate when little, but big problems, get in your way of a great project.
To begin, the issue is with the background changer and the randomizer.

The issue with the randomizer is that you have bgRand set as a variable meaning that it is loaded once at the beginning of the page loading. Try making it a function instead:

var bgRand = function(){return Math.round(Math.random() * 5);}
      bgOpt = new Array(6);
      bgOpt[0] = "background1.jpg";
      bgOpt[1] = "background2.jpg";
      bgOpt[2] = "background3.jpg";
      bgOpt[3] = "background4.jpg";
      bgOpt[4] = "background5.jpg";
      bgOpt[5] = "background6.jpg";
      var bgCurr = bgOpt[bgRand()];

The next issue is how your setting the background. You can do this much easier and make your "cake" much more delicious. Try this chunk of code:

document.getElementById("body").style.backgroundImage = "url('"+bgCurr+"')";

Now feel free to write the body tag with an id of "body". Like so:

<body id="body">

Finally I will give you a fork to eat your cake (AKA copy and paste source code):

     <head>    
            <title>Welcome to Cuhteekaloo!</title>

                  <SCRIPT LANGUAGE="JAVASCRIPT">
                      var bgRand = function(){return Math.round(Math.random() * 5);}
                      bgOpt = new Array(6);
                      bgOpt[0] = "background1.jpg";
                      bgOpt[1] = "background2.jpg";
                      bgOpt[2] = "background3.jpg";
                      bgOpt[3] = "background4.jpg";
                      bgOpt[4] = "background5.jpg";
                      bgOpt[5] = "background6.jpg";
                      var bgCurr = bgOpt[bgRand]();
    document.getElementById("body").style.backgroundImage = "url('"+bgCurr+"')";
                  </SCRIPT>
        <link rel="stylesheet" type="text/css" href="cuhteekaloo.css"/>
              <link rel="icon" type="image/jpg" href="jack.jpg"/>

              <style type="text/css">
                  html,body {margin:0; padding:0; height:100%; overflow-y:hidden;   
background-image: url(background1.jpg);
background-repeat: no-repeat;
background-position: center; 
background-attachment: fixed; 
                  body  {color:white;}
                  img       {border:3px white solid;}
                  p     {text-align:justify;}
                  a:link, a:visited {color:white;}
                  a:hover, a:active {color:orange;}
                  .center   {text-align:center; display:block;}
              </style>
        </head>
    <body id="body">

Hope this helped!

Upvotes: 1

Related Questions