Question 40836 in PHP Question posted in
Official manual can be found here.

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

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

Tags:

2

Answers


  1. 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;
    }
    Login or Signup to reply.
  2. 0

    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:

    example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search