Random background image


I've modified Aalborg thème to put a background image to my site.

I have pasted the following code into: mod/aalborg_theme/views/default/elements/layout.css

body {
    background: url('aalborg_theme/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

It works well. Now I would like to randomize the displaying of 4 or 5 backroud image (each refresh  of tjhe page)

Is it possible? I have read on forums that you can do it by using Javascript.. Is there a way using css only? thanks

  • I am trying a lot of codes found on the net. It appears that there is a way using php and css. Il  i choose this way, how can I do? Where must I save the php file? thx

  • Just don't do it. Background images have been out of fashion for 2 decades for a good reason: they are a torture for the eye, distract user from the content, as well as double the size of your page for no good reason. I don't want to spend my mobile data on loading someone's background images that I won't even see on my device. White background is your friend. Rather spend time on building useful content and easy UI.

  • I second what IK said.

    However if you *really* still want to do it you will need javascript or php, there's no pure css way that I'm aware of.

    Keep in mind that with caches on your css won't change, so you can't change it directly in cached css.  You can set up a number of different classes for different backgrounds and have php (or js) apply a class at random out of an array of possibilities.

    Still, unless there's a really good reason for it it's probably not a great feature.

  • @Matt Beckett

    there's no pure css way

    There's CSS way ;)

  • Thanks for your answers.


    I am working for a touristic destination and our force are wonderful landscapes. I agree with you for white backrounds, but in this special case, my site with white bg is not "sexy" enough to fit with our image...

    I've managed to make a bg image, with white, transparent blocks (for activity, groups...). It looks quite good and still responsive so it appears on mobile (tested).

    So if I exclude bg image, is there others ways to enhanced aalborg theme visually? To make it more attractive for the visitor?

    And if I decide to continue in this way? Where must I save the pp file? and the css?


    If there is a css only way, can you give me this way?

    Thanks all for taking time for a noobie like me ;)


  • If RvR has a css way then great!

    Otherwise use my class switching method by overriding the page/default view and picking from a list of classes at random.