Comment modifier dynamiquement CSS

Question

J'ai besoin de mon administrateur pour pouvoir modifier/mettre à jour la bannière de mon site.

C'est le code de la bannière

<div class="containertop">This depends on the background of the div</div> 

et c'est le CSS pour que

.containertop 
{ 
    width:1000px; 
    height:300px; 
    **background:url(../images/1.png) no-repeat center;** 
    margin: 0 auto; 
    margin-top: 40px; 
} 

Ce que je voudrais arriver est la même que celle d'une photo de couverture Facebook. Quand une nouvelle bannière est téléchargée, le CSS sera mis à jour (quelque chose comme ça). Mais bien sûr, la nouvelle bannière doit être extraite de la base de données.

Je pense que le CSS deviendrait comme ceci:

Fetch la source bannière enregistrée puis:

background:url(<?php echo $row['image']; ?>); 

mais puis-je faire la connexion PHP à la base de données (y compris « dbname.php ') dans un txt CSS?

Answer 1

Je suis d'accord avec Ben. Si vous créez une petite section css dans votre page, vous pouvez y mettre le code .containerTop. Ensuite, mettez votre code dans la page. Ainsi, dans votre page Web réelle, mettez ceci:

<style type="text/css"> 
.containertop{ 
width:1000px; 
height:300px; 
background:url(<?php echo $row['image']; ?>); 
margin: 0 auto; 
margin-top: 40px; 
} 
</style> 

Bien sûr, votre URL de fond ne sera pas mise à jour jusqu'à ce qu'il soit rechargé. Si vous décidez de le faire de cette façon, n'oubliez pas de retirer la définition .containerTop de votre css existant. Après avoir dit tout cela, j'aime vraiment la réponse de dystroy. Très agréable. Je n'ai jamais pensé à faire ça.

Answer 2

Rien ne vous empêche de diffuser un fichier css généré par PHP. C'est même facile.

Il suffit de démarrer votre fichier php comme ceci:

<?php 
header("Content-Type: text/css"); 

Answer 3

Vous pouvez définir fond containertop lors du chargement de fichier php.

<?php 
echo "<style>.containertop{ background:url(../images/".$row['image'].") no-repeat center;}</style>" 
?> 

Ceci définira l'arrière-plan récupéré à partir de db.

Answer 4

Eh bien, vous pouvez utiliser jQuery pour modifier/écraser le fichier CSS.

Exemple -

$('.containertop').css('backgroud','url(images/change.jpg) repeat'); 

ou

$('.containertop').css('backgroud','url(<?php echo $images_url ?>) repeat');