Placer une image background dans le html

Résolu

arscy Messages postés 173 Date d'inscription Statut Membre Dernière intervention -
jordane45 Messages postés 38472 Date d'inscription Statut Modérateur Dernière intervention - 12 janv. 2023 à 20:40

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

A voir également:

Placer une image background dans le html
Placer des points sur une carte - Guide
Image iso - Guide
Insérer une image dans word sans bouger le texte - Guide
Légender une image - Guide
Editeur html - Télécharger - HTML

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38472 Date d'inscription Statut Modérateur Dernière intervention 4 744

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)

arscy Messages postés 173 Date d'inscription Statut Membre Dernière intervention 9

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;">

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?

arscy Messages postés 173 Date d'inscription Statut Membre Dernière intervention 9 > arscy Messages postés 173 Date d'inscription Statut Membre Dernière intervention

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;">

jordane45 Messages postés 38472 Date d'inscription Statut Modérateur Dernière intervention 4 744 > arscy Messages postés 173 Date d'inscription Statut Membre Dernière intervention

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

PIX

probleme sommet

la balise ou

Dechiffrer une image caché

ou ou

Votre réponse

Discussions similaires