Question 173237 in Html Question posted in
Some basic documentation can be found here.

Html – How can I replace a CSS body background image with randomly shown images on page refresh?

Replace a css body background image style with code that randomly shows images on refreshing page?

This is the code that I want to replace

<style>  
body{background: url('<?php echo $wo['config']['theme_url'];?>/img/welcome/background.png') !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}  
</style>

I am new at this, I have tried code downloaded from the internet that worked using very simple html, javascript and css in a folder, but I can’t translate it to work with the above. I think it may not be relevant. That’s why I decided to post here.

At the moment the above code shows a single image for the background of the body tag. I would like the body background image to change to another image randomly choosen from images in a specfied folder. What would be the best way form me to acheive this?

Tags:

3

Answers


  1. 0

    First of all, please add code snippets around your HTML code and all your code globally. It’s more readable for users that want to help you.

    Supposing your images are in the folder you provided, the code should be like this :

    <?php $files = glob($wo['config']['theme_url'] . '/img/welcome' . '/*.*');$file = array_rand($files);echo $files[$file]; ?>

    instead of

    <?php echo $wo['config']['theme_url']?>/img/welcome/background.png

    This will take all the files in your config directory, and select an index randomly. Then you have just to pick the file name of the index $file and display it with echo.

    Login or Signup to reply.
  2. 0

    You can try to generate a random number that changes the name of the file that acts as wallpaper

    <style>
      body{background: url('<?php echo $wo['config']['theme_url'];?>/img/welcome/background<?php echo rand(1,10)?>.png') !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}  
</style>

    With this code it will try to access 10 different images called:
    background1.png,background2.png ..etc

    For this you must have those 10 images with those names in your images folder

    Login or Signup to reply.
  3. 0

    to randomly background image you can write some JavaScript like this:

      <style>
    body {
      /* Remove the existing background styles */
      background: none !important;
    }
  </style>
  <script>
    window.addEventListener('DOMContentLoaded', function() {
      const imageUrls = [
        '/path/to/image1.jpg',
        '/path/to/image2.jpg',
        '/path/to/image3.jpg',
        // Add more image URLs as needed
      ];
      
      const randomIndex = Math.floor(Math.random() * imageUrls.length);
      const randomImageUrl = imageUrls[randomIndex];
      
      document.body.style.background = `url(${randomImageUrl})`;
      document.body.style.backgroundPosition = 'center';
      document.body.style.backgroundRepeat = 'no-repeat';
      document.body.style.backgroundSize = 'cover';
    });
  </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search