Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Random background image

    Hey,

    Im sorry for bothering you with this but Im creating this website with a basic right sidebar structure and with full page background image.
    I used this CSS3 code to make it fit the page as seen on http://css-tricks.com/perfect-full-p...kground-image/
    so the body css part looks like this atm:

    body {
    background-attachment: fixed;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/backg.jpg");
    background-origin: padding-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 0 none;
    font-size: 90%;
    height: 100%;
    margin: 0;
    min-width: 600px;
    padding: 0;
    width: 100%;
    }
    However I have around 7 different background images that I wanted to use so they replace themselves every time the user refreshes their page. I found some codes online obviously but I can't seem to make any of them work, plus I don't think PHP works on the place where I'm testing the website :/

    Thank you so much in advance for any help!!

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    what you probably will want to look up is implementing a javascript array, and passing that array randomly through the background asset. Shouldn't be too difficult.

  • Users who have thanked SeattleMicah for this post:

    ekamrec (06-14-2012)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SeattleMicah View Post
    what you probably will want to look up is implementing a javascript array, and passing that array randomly through the background asset. Shouldn't be too difficult.
    I found some javascript codes related to this at http://icodesnip.com/search/actionsc...ndom%20image/2
    they dont seem to work with my css bg code or something though sorry if I'm really clueless here

  • #4
    New Coder
    Join Date
    Apr 2012
    Posts
    31
    Thanks
    10
    Thanked 2 Times in 2 Posts
    Code:
    body {
    background-attachment: fixed;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/backg.jpg");
    background-origin: padding-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 0 none;
    font-size: 90%;
    height: 100%;
    margin: 0;
    min-width: 600px;
    padding: 0;
    width: 100%;
    }
    The Javascript might not be working because you already have a background image set in your CSS, so the images are replacing each other behind that.

  • Users who have thanked Flames for this post:

    ekamrec (06-14-2012)

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Flames View Post
    Code:
    body {
    background-attachment: fixed;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/backg.jpg");
    background-origin: padding-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 0 none;
    font-size: 90%;
    height: 100%;
    margin: 0;
    min-width: 600px;
    padding: 0;
    width: 100%;
    }
    The Javascript might not be working because you already have a background image set in your CSS, so the images are replacing each other behind that.
    I tried removing that when using the javascript codes though but just wondering if I do remove that part won't it affect the CSS3 code to make the perfect full page background image thing?
    thanks!

  • #6
    New Coder
    Join Date
    Apr 2012
    Posts
    31
    Thanks
    10
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by ekamrec View Post
    I tried removing that when using the javascript codes though but just wondering if I do remove that part won't it affect the CSS3 code to make the perfect full page background image thing?
    thanks!
    It shouldn't. The full page background (your body div) is set with the height and width being 100%. What you're doing now is setting a background to that div, it shouldn't affect the Javascript.

    Mind posting the Javascript code too?

  • Users who have thanked Flames for this post:

    ekamrec (06-14-2012)

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,628
    Thanks
    0
    Thanked 648 Times in 638 Posts
    All you need in the JavaScript is:

    Code:
    (function() {
    "use strict";
    var imgs = [];
    imgs[0] = 'backg1.jpg";
    imgs[1] = 'backg2.jpg";
    imgs[2] = 'backg3.jpg";
    imgs[3] = 'backg4.jpg";
    
    document.getElementsByTagName('body')[0].style.backgroundImage = 'url("images/'+imgs[Math.floor(Math.random()*imgs.length)]+'")';
    })();
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    ekamrec (06-14-2012)

  • #8
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks so much everyone!!

    I used this simple one and it's working now:

    <script type="text/javascript">
    // # of images
    var imgCount = 4;
    // image directory
    var dir = 'images/';
    // random the images
    var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
    // array of images &amp; file name
    var images = new Array
    images[1] = "bg1.jpg",
    images[2] = "bg2.jpg",
    images[3] = "bg3.jpg",
    images[4] = "bg4.jpg";
    document.body.style.backgroundImage = "url(" + dir + images[randomCount] + ")";
    </script>
    I couldn't make the code that doesn't allow successive bg images to be the same the 1st time after we reload to work though

  • #9
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by arunnayak View Post
    according to my view use javascript array to every background image,
    like a similar code to the last one I posted for each background image? :/
    ty

  • #10
    New Coder
    Join Date
    Apr 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    wouldn't using a random background image be very very unattractive to visitors & may prevent future visits?

  • #11
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've done similar things in the past with CGI. I just point the image source to the script but that was so 90s.Nice function but why cram it all on one line?
    If the OP wants to rotate the images then the script is still a good place to start.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •