0

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: http://goo.gl/MgsoX4 (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!

Alex
  • 69
  • 2
  • 9
  • 3
    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 Oct 31 '14 at 20:27
  • 1
    @Steve-Sanders is right. You could try a javascript image rotator. I like http://jquery.malsup.com/cycle2/ – JakeParis Oct 31 '14 at 20:29
  • 1
    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 Oct 31 '14 at 20:30
  • What kind of world do we live in where a copy-paste developer can make a website like that. – JakeParis Oct 31 '14 at 20:31
  • @SteveSanders it won't work even if I use my computer as the host :( – Alex Oct 31 '14 at 20:32
  • @JakeParis don't be too intimidated, it is a free template: http://html5up.net/alpha – Steve Sanders Oct 31 '14 at 20:46
  • 1
    Yeah @JakeParis, haha, sorry to crush your dreams. Steve seems to know my secrets – Alex Oct 31 '14 at 20:47
  • But hey, @SteveSanders, I know this might be easy html for you, but I added many things that aren't on the template! For example, click on the yellow lock icon, I worked hard for that! You then type a password and it takes you to the secret class textbook solutions. Astonished much? Just kidding, I do what I can! – Alex Oct 31 '14 at 20:49
  • @Alejandro nothing wrong with using a template, we all have to start somewhere :) – Steve Sanders Oct 31 '14 at 20:50

6 Answers6

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>
Kyle
  • 4,421
  • 22
  • 32
  • My webpage is not based on php, it's html. Does that make any difference? – Alex Oct 31 '14 at 20:32
  • @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. – Kyle Oct 31 '14 at 20:39
  • 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 http://goo.gl/MgsoX4. That's how it looks like with the javascript code – Alex Oct 31 '14 at 20:45
  • @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. – Kyle Oct 31 '14 at 20:52
  • 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: https://dl.dropboxusercontent.com/u/51601633/html5up-alpha.zip – Alex Oct 31 '14 at 20:57
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.

austinthedeveloper
  • 2,401
  • 19
  • 27
  • 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 – Alex Oct 31 '14 at 20:35
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"

DividedByZero
  • 4,333
  • 2
  • 19
  • 33
0

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

Mike N.
  • 26
  • 1
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>
Larry Lane
  • 2,141
  • 1
  • 12
  • 18
  • 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. – Larry Lane Oct 31 '14 at 23:07
  • 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 – Alex Nov 01 '14 at 10:37
-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;
Pang
  • 9,564
  • 146
  • 81
  • 122
user1515361
  • 1