Random Css Background Image

July 31, 2024 Post a Comment

I can't find anything that works for me, and since I'm a cut and paste html editor (I know only the main basic stuff), I don't understand most of the other posts. This is the webpa

Solution 1:

The issue you're having is that you're trying to define the image inside of the stylesheet. In order to create a random background image, it will have to be attached as an inline style.

Keep the css how you currently have it for a fallback. You would then have the div look something like this:

<div id="banner" style="background-image:url("images/newImage.jpg");"></div>

@Steve-Sanders comment is also correct in that you will need an actual server to run PHP.

Solution 2:

Inside of your PHP page, inside of the head tag, you could alter the #banner style. Because CSS is cascading, doing this will override anything inside of your external style sheet

my_style_sheet.css

#banner {
    background-attachment: scroll,                          fixed;
    background-color: #666;
    background-position: top left,                      center center;
    background-repeat: repeat,                          no-repeat;
    background-size: auto,                          cover;
    color: #fff;
    padding: 12em020em0;
    text-align: center;
}

my_page.php

<head><linkrel="stylesheet"type="text/css"href="my_style_sheet.css" /><styletype="text/css">#banner {
      background-image: url('images/<?phpecho rand(0, 5); ?>.jpg');
  }
  </style>

Javascript example

...
<divid="banner"></div><scripttype="text/javascript">document.getElementById('banner').style.backgroundImage = "url('images/'" + Math.ceil(Math.random() * 5) + ".jpg')";
</script>

Solution 3:

If you want to use JQuery you can paste this code in the head section of your html page or just before the closing tag of your page.

I dowloaded your files and changed the file path for the img and it worked fine for me. everytime I hit f5 you will get a new background image

<!-- place in head element or before closing--><!-- </body> tag of html page --><!--load JQuery first--><scriptsrc="//code.jquery.com/jquery-1.10.2.js"></script><script>
$(document).ready(function(){

//the highest number of the image you want to loadvar upperLimit = 10;

//get random number between 1 and 10//change upperlimit above to increase or //decrease rangevar randomNum = Math.floor((Math.random() * upperLimit) + 1);    


 //change the background image to a random jpg//edit add closing )  to prevent syntax error
 $("body").css("background-image","url('images/" + randomNum + ".jpg')");//<--changed path




 });
 </script>

Solution 4:

It won't work, unless your page is in PHP. You need to use javascript/ajax instead to rotate the images.

Solution 5:

PHP requires a server that can execute the code. Dropbox doesn't execute the code because it isn't supposed to. Instead it just serves the html the way it was uploaded, if you check the DOM you will see the php tags. When served by a proper server that executes php the tags are removed.

Edit: change the html file's extension to "php" so that it looks like "index.php"

Html5 Works