Random CSS background image

Question

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 webpage I'm working with: https://dl.dropboxusercontent.com/u/51601633/html5up-alpha/index.html (I'm hosting it on dropbox because I haven't finished it yet). I had the idea of having a background change every time some refreshed/reloaded the page. I can't seem to find anything that works for me. The CSS for the background is the following:

#banner {
    background-attachment: scroll,                          fixed;
    background-color: #666;
    background-image: url("images/overlay.png"), url("../images/1.jpg");
    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;
}

Whenever I change "../images/1.jpg" to "../images/2.jpg", the background will change to the second jpg, but I've tried a php image rotator and it won't work!

PHP isn't working because you are hosting on Dropbox, which only serves static files. You need a proper server running PHP, or use a client-side language like Javascript instead. — Steve Sanders
– Steve Sanders, Commented Oct 31, 2014 at 20:27
@Steve-Sanders is right. You could try a javascript image rotator. I like jquery.malsup.com/cycle2 — JakeParis
– JakeParis, Commented Oct 31, 2014 at 20:29
The background-image: url("images/overlay.png"), url("../images/1.jpg"); will not roate your images. This is apart of the CSS3 spec for layering background images. — Gary
– Gary, Commented Oct 31, 2014 at 20:30
What kind of world do we live in where a copy-paste developer can make a website like that. — JakeParis
– JakeParis, Commented Oct 31, 2014 at 20:31
Yeah @JakeParis, haha, sorry to crush your dreams. Steve seems to know my secrets — Alex
– Alex, Commented Oct 31, 2014 at 20:47

austinthedeveloper · Accepted Answer · 2014-10-31 20:29:46Z

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.

answered Oct 31, 2014 at 20:29

austinthedeveloper

2,63923 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

Eh, that just sounds like so much work! Is there a way to not use PHP at all? I don't even have a php file in my website, it's all .html! For some reason I feel that's the stupidest comment I've made. @austinthedeveloper

Kyle · Accepted Answer · 2014-10-31 20:38:28Z

1

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>

edited Oct 31, 2014 at 20:38

answered Oct 31, 2014 at 20:29

Kyle

4,46124 silver badges34 bronze badges

5 Comments

Alex Over a year ago

My webpage is not based on php, it's html. Does that make any difference?

Kyle Over a year ago

@Alejandro If your webpage does not use PHP, then yes. Your question mentioned using PHP, so I thought your web page had access to that. You could do it using Javascript as well. I have updated my answer to show that.

Alex Over a year ago

Tried the javascript in the head section. Still doesn't work, it actually messes it up and it looks weird. Have a look at it now dl.dropboxusercontent.com/u/51601633/html5up-alpha/index.html. That's how it looks like with the javascript code

Kyle Over a year ago

@Alejandro You cannot put the javascript specifically in the head. If you put it there, you will have to put it inside some kind of ready function to make sure it executes only after the entire DOM is loaded. In my example, I have put it directly under the banner element to ensure that when the script executes, the element is ready.

Alex Over a year ago

it still doesn't work! I don't understand anything, I've tried everything! There's all the files if you wanna try it yourselves: dl.dropboxusercontent.com/u/51601633/html5up-alpha.zip

Larry Lane · Accepted Answer · 2014-10-31 23:04:57Z

0

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>

edited Oct 31, 2014 at 23:04

answered Oct 31, 2014 at 20:50

Larry Lane

2,1811 gold badge14 silver badges18 bronze badges

2 Comments

Larry Lane Over a year ago

Try my code now I downloaded your files and change the img url to match your file structure and my code worked just fine everytime you hit f5 you will get a new background image. I notice you already were loading jquery so just omit the script tag that loads jquery since you are already loading it.

Alex Over a year ago

Oops, I'm afraid I wasn't clear enough. I want to change the BANNER picture. What goes behind the Title "Bach CCSS", not the body background. Any quick fix for this? @Larry-Lane

Mike N. · Accepted Answer · 2014-10-31 20:41:46Z

0

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

answered Oct 31, 2014 at 20:41

Mike N.

261 bronze badge

Comments

DividedByZero · Accepted Answer · 2014-10-31 20:45:47Z

0

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"

edited Oct 31, 2014 at 20:45

answered Oct 31, 2014 at 20:36

DividedByZero

4,4212 gold badges24 silver badges34 bronze badges

4 Comments

Alex Over a year ago

But again, I've tried accessing it from my localhost as well. Doesn't work either.

DividedByZero Over a year ago

@Alejandro Change the extension to php. Have a look at the edit

Alex Over a year ago

Oh, gotcha. Won't that mess it up? Let me try

DividedByZero Over a year ago

@Alejandro no. The PHP extension is only used to tell the server that there's PHP as well as HTML and all browsers know that php files should be used exactly like html

Pang · Accepted Answer · 2016-11-06 05:58:00Z

-1

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;

edited Nov 6, 2016 at 5:58

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Nov 4, 2016 at 7:26

user1515361

1

Collectives™ on Stack Overflow

Random CSS background image

6 Answers 6

1 Comment

5 Comments

2 Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

5 Comments

2 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related