How can I use PHP/HTML to display a random image as a background image

Question

I'm trying to learn how to build a website. I've built the index page and here is the PHP and HTML.

<?php
session_start();
$png = array('png1.jpg', 'png2.jpeg', 'png3.jpg', 'png4.jpg');

$random = rand(0,4);
$picture = "$png[$random]";
?>


<!DOCTYPE HTML>
<html>  
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>

<form action="login.php" method="post">
Name: <input type="text" name="name"><br>
Password: <input type="text" name="password"><br>
<input type="submit">
</form>

</body>
</html>

and here is the CSS where I link to the image file:

body{
  background-image: url('png1.png');
}

I'm running the site on replit.com and here is the png1.jpg:

enter image description here

The background image is not appearing. Only the form is showing. the link of website on replit is https://htmlphpcssjavascript-login-system.gepingyi.repl.co/

you can view the code with inspect

Your English isn't very clear which makes it hard it understand what you're asking. Please rewrite your question. — Bernard Borg
– Bernard Borg, Commented Jan 19, 2023 at 19:48

Professor Abronsius · Accepted Answer · 2023-01-20 08:50:19Z

4

You appear to try generating a random background image using PHP but then do nothing with that, unless somehow you are hoping that it will exist within your stylesheet? As the stylesheet is a .css file any PHP code within will not be executed by the server so to have a dynamic style you could simply add an inline style tags to the page that sets the body background

<?php

    session_start();
    $png = array( 'png1.jpg', 'png2.jpeg', 'png3.jpg', 'png4.jpg' );

    $random = rand(0,count($png)-1);
    $picture = $png[ $random ];
    
?>
<!DOCTYPE HTML>
<html>  
    <head>
        <link rel='stylesheet' href='index.css'>
        <style>
            body{
                background-image:url(<?php echo $picture; ?>);
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <form action='login.php' method='post'>
            <label>Name: <input type='text' name='name' /></label>
            <label>Password: <input type='text' name='password' /></label>
            <input type='submit'>
        </form>
    </body>
</html>

Thinking that perhaps the above, being untested, had an issue overlooked when writing the answer I have just put together a working example using images on my system &/or on the web.

<?php

    session_start();
    
    //local images within subdirectory
    $png = array( 'bck1.jpg','bck2.jpg','bck3.jpg','bck4.jpg','bck5.jpg','bck6.jpg','bck7.jpg' );
    $random = rand(0,count($png)-1);
    $picture = './images/' . $png[ $random ];


    // globally accessible images on interwebs
    $png=array(
        'https://undsgn.com/wp-content/uploads/2018/04/ltotbngnzzu-uai-1600x900.jpg',
        'https://cdn.wallpapersafari.com/54/86/cU6JWo.jpg',
        'https://cdn.nimbusthemes.com/2017/09/09233338/Free-Nature-Backgrounds-Sunset-by-Pixabay.jpg',
        'https://img.youtube.com/vi/V-FgQ2NAGFc/maxresdefault.jpg'
    );
    $random = rand(0,count($png)-1);
    $picture = $png[ $random ];

    

?>
<!DOCTYPE HTML>
<html>
    <head>
        <style>
        
            body{
                /*
                    If the background image is to entirely cover the available space
                    and maintaining the aspect ratio is not important then you can
                    set the size as below. Other settings ( such as cover or 100% auto )
                    will cause blank space when image bounds are reached
                */
                background-image:url(<?php echo $picture; ?>);
                background-size: 100% 100vh;
                background-repeat:no-repeat;
            }
            
            form{
                width:300px;
                padding:1rem;
                border:1px solid silver;
                background:white;
                box-sizing:border-box;
                border-radius:1rem;
                box-shadow:0 0 25px white;
                margin:2rem;
                font-family:monospace;
            }
            
            label{
                display:flex;
                flex-direction:row;
                justify-content:space-between;
                align-items:center;
                background:white;
                margin:0.25rem 0;
            }

            [type='submit']{
                width:100%;
                padding:0.5rem;
                margin:1rem 0 0 0;
            }
        </style>
    </head>
    <body>
        <form action='login.php' method='post'>
            <label>Name: <input type='text' name='name' /></label>
            <label>Password: <input type='text' name='password' /></label>
            <input type='submit'>
        </form>
    </body>
</html>

The above, when saved with a .php extension will yield output like this:

edited Jan 20, 2023 at 8:50

answered Jan 19, 2023 at 19:53

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

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

7 Comments

james Over a year ago

thank you so much to answer sir, i indead trying make random back ground ,but it did't work, so i thought it's the problem with the php.So i use one picture to test first, but it seem didn't work too.

M. Eriksson Over a year ago

@james - Your comment is very unclear. Did this answer help you or not?

james Over a year ago

I aplogize for making the comment not clear, but the answer does not help me.The html does not showing the background anyway.

james Over a year ago

and here is the link htmlphpcssjavascript-login-system.gepingyi.repl.co

Professor Abronsius Over a year ago

When I tested index.php it returns 404 yet index.html is OK. You must save the files with .php extension unless you do some trickery with the server config ( probably beyond your level of expertise just yet )

|

Amr Mashrah · Accepted Answer · 2023-01-19 19:49:51Z

0

I am not sure if your image is not showing or if it is showing in the wrong place.

using the css below you will allow you to set your background image properly.

 body {
      background-image: url('png1.png');
      background-repeat: no-repeat;
      background-attachment: fixed;  
      background-size: cover;
    }

answered Jan 19, 2023 at 19:49

Amr Mashrah

1872 silver badges14 bronze badges

5 Comments

james Over a year ago

it still didn't seem to work, maybe it's the problem with replit.com?

james Over a year ago

here is the link for my program in replit.com

james Over a year ago

replit.com/@GepingYi/…

james Over a year ago

htmlphpcssjavascript-login-system.gepingyi.repl.co

schmauch Over a year ago

Where is png1.png located? Is it in the same directory as your php file? If not, you should reference it with the correct path (relative or absolute).

Collectives™ on Stack Overflow

How can I use PHP/HTML to display a random image as a background image

2 Answers 2

7 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related