pass CSS background-image value through PHP

Question

i have this div in html

<div class="overlap">
    <img src="images/somepicture.jpg" alt="IMG-PRODUCT">
</div>

and this is my css

.overlap{
    position: relative;
    background-color: blue;
}

.overlap:after{
    content: "";
    -webkit-transition: transform 0.9s ease;
    -o-transition: transform 0.9s ease;
    -moz-transition: transform 0.9s ease;
    transition: transform 0.9s ease;
    background-image: url('../images/anotherPicture.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    position: absolute;
    width: 36%;
    height: 40%;
    top:23%;
    left: 34%;
}

.overlap:hover:after{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

i need inside .overlap:after{ the image from the background-image: url( change with the value from a php variable something like this:

background-image: url('../images/$imageName.png');

Jerdine Sabio · Accepted Answer · 2019-12-17 02:14:40Z

Change your css' file extension to .php then be sure to indicate a value for $imageName before that css is loaded. For the example below, let's say the file is style.php;

<?php 
   $imageName = "image1.png";
?>
<link rel="stylesheet" type="text/css" href="style.php">

Then in your style.php, include header("Content-type: text/css"); at the top and modify your style with the php variable; background-image: url('../images/<?=$imageName;?>');

<?php
   header("Content-type: text/css");
?>
.overlap{
    position: relative;
    background-color: blue;
}

.overlap:after{
    content: "";
    -webkit-transition: transform 0.9s ease;
    -o-transition: transform 0.9s ease;
    -moz-transition: transform 0.9s ease;
    transition: transform 0.9s ease;
    background-image: url('../images/<?=$imageName;?>');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    position: absolute;
    width: 36%;
    height: 40%;
    top:23%;
    left: 34%;
}

.overlap:hover:after{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

If .overlap is inside a loop it gets tricky, first you have to add your queries before linking your css.

<?php 
   // for example this is your query
   $con = "";
   $sql = "SELECT Lastname, Age FROM Persons ORDER BY Lastname";
   $result = mysqli_query($con, $sql);
?>
<link rel="stylesheet" type="text/css" href="style.php">

Then inside style.php, we separated .overlap which uses common css other than background image and used a new class .overLapCount which we will use in the loop of $result.

<?php
   header("Content-type: text/css");
?>
.overlap{
    position: relative;
    background-color: blue;
}

.overlap{
   content: '';
   -webkit-transition: transform 0.9s ease;
   -o-transition: transform 0.9s ease;
   -moz-transition: transform 0.9s ease;
   transition: transform 0.9s ease;
   background-repeat: no-repeat;
   background-size: 100% 100%;
   display: inline-block;
   position: absolute;
   width: 36%;
   height: 40%;
   top:23%;
   left: 34%;
}

<?php

   // create a counter variable which we will use to create a class;
   // overlapCount1, overlapCount2, overlapCount3, and so on...
   $count = 0;

   while ($row = mysqli_fetch_assoc($result))
   {
      // access the image inside row
      $imageName = $row['image'];   


      // echo the css, see $count and $imageName
      // be careful with quotation marks

      echo "
         .overlap.overlapCount"+$count+":after
         {

            background-image: url('../images/"+$imageName+"');
         }
      ";

      // increment
      $count++;
   }
?>

.overlap:hover:after{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

Then in your php/html, during your loop, use that class while incrementing.

<?php
   $count = 0;
   while ($row = mysqli_fetch_assoc($result))
   {
      echo "<div class='overlap overlapCount"+$count+"'></div>";
   }
   $count++;
?>

Utkarsh · Accepted Answer · 2019-12-16 04:52:32Z

You can declare your html in .php file and you need to mention the css as internal stylesheet in the .php page, your .php file should like this

<html>
<head>
<style>
.overlap{
    position: relative;
    background-color: blue;
}

.overlap:after{
    content: "";
    -webkit-transition: transform 0.9s ease;
    -o-transition: transform 0.9s ease;
    -moz-transition: transform 0.9s ease;
    transition: transform 0.9s ease;
    background-image: url('../images/<?php echo $imagename; ?>');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    position: absolute;
    width: 36%;
    height: 40%;
    top:23%;
    left: 34%;
}

.overlap:hover:after{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
</style>
</head>
<body>
<div class="overlap">
    <img src="images/somepicture.jpg" alt="IMG-PRODUCT">
</div>
</body>
</html>

Collectives™ on Stack Overflow

pass CSS background-image value through PHP

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related