web-dev-qa-db-fra.com

Comment avoir une image dynamique comme fond CSS?

J'ai un logo div que je veux utiliser mon image de logo comme arrière-plan, comme:

.logo {
    background: #FFF url(images/logo.jpg);
}

Cependant, sur une page de paramètres de mon script, j'aimerais avoir un champ de saisie de texte pour spécifier l'URL de l'image pour l'image d'arrière-plan.

Comment puis-je définir l'image d'arrière-plan pour ce div comme URL d'image entrée sans avoir à faire:

<div><img src="/images/logo.jpg" /></div>

(Le script est écrit en PHP)

phpcssbackground
11
JROB

Voici deux options pour définir dynamiquement une image d'arrière-plan.

  1. Mettez une feuille de style incorporée dans le <head> Du document:

    <style type="text/css">
.logo {
   background: #FFF url(<?php echo $variable_holding_img_url; ?>);
}
</style>

  2. Définissez la propriété CSS background-image En ligne:

    <div style="background-image: url(<?php echo $varable_holding_img_url; ?>);">...</div>

Remarque: Assurez-vous de nettoyer votre entrée, avant de l'enregistrer dans la base de données (voir Bobby Tables ). Assurez-vous qu'il ne contient pas de code HTML ou autre, uniquement des caractères URL valides, des guillemets d'échappement, etc. Si cela n'est pas fait, un attaquant pourrait injecter du code dans la page:

"> <script src="http://example.com/xss-attack.js"></script> <!--
31
Nathan
<input type="text" class="inputContent" />
<script type="text/javascript">
    var inputC = $('input.inputContent').val();
    $('body').css('background', 'url(' + inputC + ')');
</script>

C'est entièrement js et jQuery, parce que je ne connais pas PHP, mais c'est une solution!

6
Chad

Vous devez soit générer le CSS à partir d'un script PHP (quelque peu avancé), soit utiliser des styles en ligne pour faire l'affaire. Ex:

<div style="background-image: <?php echo $_POST['whateverjpg']; ?>" >
//blah
</div>

C'est incroyablement précaire, mais la réponse la plus concise que je puisse donner ..

3
James L.

Je pense que vous pouvez définir l'image d'arrière-plan dynamiquement en utilisant javascript comme indiqué ici .

document.getElementById("xyz").style.backgroundImage="your path";

Si vous préférez ne pas utiliser javascript, pourquoi ne pouvez-vous pas utiliser l'attribut inline style.
ex

<div style="background-image: url(xyz)"></div>
2
Arun P Johny