Random CSS background image

前端未结

关注

 6  850

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

相关标签:

6条回答

盖世英雄少女心

2021-01-26 10:48

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"

0 讨论(0)
发布评论:

提交评论
- 加载中...

庸人自扰

2021-01-26 10:49

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-->
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>

      <script>
$(document).ready(function(){

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

//get random number between 1 and 10
//change upperlimit above to increase or 
//decrease range
var 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>

0 讨论(0)

再見小時候

2021-01-26 10:52

A simple solution to this could be,

before doctype

<?php
    $bgimage = array('originals/background-01.png', 'originals/background-02.png', 'originals/background-03.png', 'originals/background-04.png', 'originals/background-05.png', 'originals/background-06.png'); 
    $i = rand(0, count($bgimage)-1); 
    $mybgimage = "$bgimage[$i]";
?>

and inside style call

background: url(images/<?php echo $mybgimage; ?>) no-repeat;

0 讨论(0)

梦谈多话

2021-01-26 10:54

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: 12em 0 20em 0;
    text-align: center;
}

my_page.php

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

Javascript example

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

0 讨论(0)

攒了一身酷

2021-01-26 10:55
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
清酒与你

2021-01-26 11:15

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

0 讨论(0)
发布评论:

提交评论
- 加载中...