Placer une image background dans le html
Résolujordane45 Messages postés 40050 Date d'inscription Statut Modérateur Dernière intervention -
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
- Placer une image background dans le html
- Placer des points sur une carte - Guide
- Légender une image - Guide
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Insérer une image dans word sans bouger le texte - Guide
1 réponse
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)
Pour une image standard je suis tenté de jouer de la sorte dessus:
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?
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 :
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.