How to Change Background Image with PHP?

We are going to dynamically change background images on webpages using PHP. Incorporating a dynamic background image on a web page can improve user experience and provide personalized content based on different conditions.

Below are the approaches to change the background image using PHP:

Table of Content

  • Using inline CSS and PHP
  • Using JavaScript and PHP

Using inline CSS and PHP

To change background images dynamically, modify CSS properties of HTML elements using inline CSS. In this approach, it sets a default background image ($backgroundImage) to a URL pointing to ‘gfg1.jpg’. It also sets a default condition ($someCondition) to true. Inside the HTML <style> tag, it sets the background image of the body to the value of $backgroundImage using PHP echo. It checks the condition $someCondition. If it evaluates to true, it updates $backgroundImage to another URL (‘gfg.png’).

Example: This example shows the implementation of the above-approach.

PHP
<?php
    $backgroundImage =
   // Default background image
'https://media.w3wiki.net/wp-content/uploads/20220620060143/gfg1.jpg';
// Default condition
    $someCondition = true; 

    // Determine background image based on condition
    if ($someCondition) {
        $backgroundImage =
'https://media.w3wiki.net/wp-content/uploads/20210318103632/gfg.png';
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Background Image with PHP</title>
    <style>
        body {
            background-image: url('<?php echo $backgroundImage; ?>');
            background-size: cover;
            /* Other CSS properties */
        }
    </style>
</head>
<body>
    <!-- HTML content -->
</body>
</html>

Output:

Using JavaScript and PHP

This approach combines JavaScript with PHP to dynamically alter background images on webpages, providing additional flexibility and interactivity. Initializes variables for conditions or uses defaults. Sets $backgroundImage based on conditions. Defines a function to change the background image in JavaScript and Invokes the function on window load, setting the background image based on PHP.

Example: This example shows the implementation of the above-approach.

PHP
<?php
    // Simulate conditions or set
   // default background image
    $someCondition = true;
    $anotherCondition = false;

    // Determine background 
   // image based on condition
    if ($someCondition) {
        $backgroundImage = 
'https://media.w3wiki.net/wp-content/uploads/20220620060143/gfg1.jpg';
    } elseif ($anotherCondition) {
        $backgroundImage =
'https://media.w3wiki.net/wp-content/uploads/20220620060143/gfg1.jpg';
    } else {
        $backgroundImage = 
'https://media.w3wiki.net/wp-content/uploads/20210318103632/gfg.png';
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Background Image with
           PHP and JavaScript</title>
    <script>
        // JavaScript function to change background image
        function changeBackgroundImage(imageUrl) {
            document.body.style.backgroundImage = 'url(' + imageUrl + ')';
            // Additional JavaScript logic if needed
        }
        // Invoke the function
        window.onload = function() {
            changeBackgroundImage('<?php echo $backgroundImage; ?>');
        };
    </script>
</head>
<body>
    <!-- HTML content -->
    <h1>Background Image Demo</h1>
    <p>This is a demonstration of changing
       the background image dynamically
       using PHP and JavaScript.</p>
</body>
</html>

Output: The webpage’s background image dynamically changes based on PHP-specified conditions, with JavaScript enabling client-side modification.



Contact Us