Placer une image background dans le html

Résolu
arscy -  

Bonjour,

J'hésite entre le forum html ou bien css, mais comme je souhaite le faire en html... va pour ici !

Je dispose d'un template boostrap qui pose dans un fichier .css un sélecteur id #selecteur pour définir toute une floppée d'attributs comme c'est prévu pour.
En outre elle pose l'attribut

background: url("image.jpg") center center;

Ce qui me pose un réel souci car je souhaiterais pouvoir manipuler cette image à ma guise (par l'intermédiaire d'une base de données par exemple), et la façon la plus simple à ma connaissance était de définir l'adresse de cette image dans le fichier html (sous-entendu : je conserve les propriétés de mon #selecteur et je redéfinis n fois mon image de fond en fonction de la page sur laquelle je me trouve).

J'ai cherché comment m'y prendre, et à part définir dans des classes comme par exemple

<style> p { background-image: url('image.jpg'); } </style>

<!-- ou bien -->

<p style="background-image: url('image.jpg')">si j'ai du texte ici ceci m'imprime ce texte avec l'image en arrière plan mais seulement sur les lignes où il y a du texte... sans texte, pas d'image</p>

Je n'ai pas trouvé de solution convenable à ce jour.
La documentation que j'ai pu lire à ce sujet me met actuellement face à un mur.
Auriez-vous des suggestions?

Merci d'avance pour votre temps
 

1 réponse

  1.  jordane45 Modérateur

    Bonjour,

    Comme pour remplir un input ou un textarea ... il te suffit de faire un echo de ta variable PHP.

    background-image: url('<?php echo $uneVariable;?>');

    Et pour ce qui est de l'affichage.. même sans texte ... il suffit de définir une largeur et une hauteur minimum à ton élément html. (via les attributs css  WIDTH et HEIGHT  /  et/ou  MIN-WIDTH et MIN-HEIGHT)

    1. arscy Auteur

      Pour une image standard je suis tenté de jouer de la sorte dessus:

      <image src="source.jpg" width="100%" height="auto" />

      Dans mon cas de figure le css a été prévu à la base spécialement pour l'image d'arrière-plan dans le #selecteur et quelques annexes,
      comment fais-je en sorte d'extraire la notion de taille?

       

      <div id="selecteur" style="background-image: url('<?php echo $chemin;?>')" width="100%" height="auto">

      Ce principe semble ne pas être approprié dans ce cas de figure

      Dans le css j'ai déjà un

      #selecteur{
  width: 100%;
  height: calc(100vh - 70px);
  /*background: url("image.jpg") center center;*/ //ce que je souhaite isoler dans mon html pour rediriger le chemin à ma guise via du php
  background-size: cover;
  position: relative;
  margin-top: 70px;
  padding: 0;
}

      J'ai essayé d'appliquer l'attribut min-height dans le css, sans succès
      j'arrive donc à voir mon image seulement si j'ai du contenu, et de façon partielle car l'ajout de texte est ici (ce n'est pas le but)
      Auriez-vous des pistes?

    2. arscy Auteur
      @arscy

      Voici une solution possible qui peut être appliquée:
      créer une classe qui comporte les attributs qui m'intéressent (et non plus un identifiant)
       

      .selecteur{
   with: ...;
   height; ...
}

      et dans la div concernée reprendre ce qui avait été écrit plus tôt avec une petite différence: pas d'apostrophes ni de guillemets dans le "url(...)", soit :

      <div class="selecteur" style="background-image: url(<?php echo $chemin;?>)" width="100%" height="auto">


       

    3.  jordane45 Modérateur
      @arscy

      Que ça soit en ciblant un id ou une class... Le fonctionnement reste le même.

      Bien entendu, un id et unique dans la page alors qu'une class peut-être appliqué à plusieurs éléments de cette même page.

Discussions similaires

Retrouver l'image originale d'une photo modifiée
Raven

10 réponses