Variables en CSS para background image url y php

Fecha Publicación:       02 de Abril de 2020
Fecha Modificación:       02 de Abril de 2020

1) Creamos un archivo en php : _configuracion_parametros_web.php:

<?php
 $background_image_url="url(".$row['background_image_url'].")";
?>

Nota= el registro $row['background_image_url'] nos devolvera  imagen.jpg entonces  la variable 
$background_image_url=  url+imagen.jpg


En el mismo archivo definimos la variable css:

<style>   
  :root {
    --background_image_url:<?=$background_image_url?>;
   }     
</style> 

Nota : La variable  --background_image_url  tomara el valor url("imagen.jpg");

 

2) Como usarlo: en un archivo css o scss por ejemplo  _pie_abajo.scss

.mi_clase{
display:flex; width: 100%;padding-bottom: 30px;
;background: var(--background_image_url); 
background-size: cover;   
		}		 

Fuente:

https://stackoverflow.com/questions/41748998/css-variables-with-background-image-url

En ejecución :  https://codepen.io/anon/pen/KaWwvz

 

Articulo : 1819 - Veces Leidas
Compartir Articulo: