How to Change Background Image with PHP? - Coding

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.geeksforgeeks.org/wp-content/uploads/20220620060143/gfg1.jpg';
// Default condition
    $someCondition = true; 

    // Determine background image based on condition
    if ($someCondition) {
        $backgroundImage =
'https://media.geeksforgeeks.org/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.geeksforgeeks.org/wp-content/uploads/20220620060143/gfg1.jpg';
    } elseif ($anotherCondition) {
        $backgroundImage =
'https://media.geeksforgeeks.org/wp-content/uploads/20220620060143/gfg1.jpg';
    } else {
        $backgroundImage = 
'https://media.geeksforgeeks.org/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.

Reffered: https://www.geeksforgeeks.org

PHP

Related
How to Build a Calendar Table in PHP?
How to Solve N Queen Problem Implementation in PHP?
Octal to Binary Converter in PHP
Decimal to Octal Converter in PHP
Octal to Decimal Converter in PHP

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	14