Placer une image background dans le html

Résolu/Fermé

arscy Messages postés 173 Date d'inscription dimanche 26 janvier 2014 Statut Membre Dernière intervention 5 octobre 2023 - 3 janv. 2023 à 18:12
jordane45 Messages postés 38392 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 janvier 2025 - 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
Editeur html - Télécharger - HTML
Comment agrandir une image - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38392 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 janvier 2025 4 731
3 janv. 2023 à 18:38

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 dimanche 26 janvier 2014 Statut Membre Dernière intervention 5 octobre 2023 9
3 janv. 2023 à 23:09

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?

arscy Messages postés 173 Date d'inscription dimanche 26 janvier 2014 Statut Membre Dernière intervention 5 octobre 2023 9 > arscy Messages postés 173 Date d'inscription dimanche 26 janvier 2014 Statut Membre Dernière intervention 5 octobre 2023
12 janv. 2023 à 19:33

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

jordane45 Messages postés 38392 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 janvier 2025 4 731 > arscy Messages postés 173 Date d'inscription dimanche 26 janvier 2014 Statut Membre Dernière intervention 5 octobre 2023
12 janv. 2023 à 20:40

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

calcule nombre des pixels "noir" dans un image (noir/blanc)

probleme sommet

PIX