Adapter taille image ds bloc paragraphe html
audrey
-
yfev -
yfev -
Bonjour,
je debute en html et css et jai un petit soucis...
Comment on fait que l'image d'arrière plan d'un paragraphe soit ajusté au texte de celui-ci ?
car par défaut, le bloc paragraphe saute une ligne ... et donc l'image d'arrière plan par conséquent descend trop bas.
voici mon code css :
p
{
width:300px;
height:300px;
text-align:justify;
margin:auto;
overflow:auto;
background-image: url("images/fond.JPG") ;
}
je debute en html et css et jai un petit soucis...
Comment on fait que l'image d'arrière plan d'un paragraphe soit ajusté au texte de celui-ci ?
car par défaut, le bloc paragraphe saute une ligne ... et donc l'image d'arrière plan par conséquent descend trop bas.
voici mon code css :
p
{
width:300px;
height:300px;
text-align:justify;
margin:auto;
overflow:auto;
background-image: url("images/fond.JPG") ;
}
A voir également:
- Adapter taille image ds bloc paragraphe html
- Comment réduire la taille d'un fichier - Guide
- Reduire taille image - Guide
- Chaque paragraphe doit être espacé de 0,42 cm ou 12 pt du paragraphe qui suit - Guide
- Editeur html - Télécharger - HTML
- Image iso - Guide
1 réponse
Yo, j'espère que j'ai tout comprit voici quelques idées:
En général on adapte pas l'arrière plan au texte mais l'inverse. Ca permet d'avoir une taille fixe d'un bloc de texte et donc l'image restera "propre".
La balise <p> en plus d'être facultative comme la plupart des balises texte (sauf pour un bon référencement naturel) est une balise dite "type en ligne" contrairement aux autre balises qui sont dites de "types bloc".
Par exemple une balise <div> délimite un espace rectangualire, si on lui met la propriété CSS background-color on aperçoit un rectangle adpaté soit à la taille de son contenu soit aux dimensions définies dans le code.
Si on fait un background-color sur une balise <p> on s'aperçoit que ce sont des lignes auquelles s'appliquent le fond de couleur, exactement comme si on surlignait le texte au marqueur.
Pour remédier à ça on peut
1°)
Mettre la balise de texte dans un div qui lui aura l'ilage de fond.
<div style="background-image: url(image.jpg);">
<p>
Mon texte a un fond rectangulaire.
</p>
</div>
soit 2°)Indiquer qu'ne balise "en ligne" devient une balise de "type bloc", avec la propiete css display:
<p style="background-image: url(image.jpg);DISPLAY: block;">
mon texte dans une balise de type bloc
</p>
Une autre astuce pour les images de fond est de leur donner des côtés symétriques pour donner une impression de continuité(pas de coupure de l'iamge entre chaque répétition).
Les propriétés background-repeat: permettent de ne pas répéter l'image de fond(avec : "no-repeat") de la répéter seulement horizontalement ou verticalement ( respectivement "repeat-x" et "repeat-y").
On peut positionner aussi la position de début de l'iamge de fond dans le cadre qu'elle occupe avec background-position: 50% 50%; (ici l'image est au milieu horizontal et milieu vertical)
Voila quelques pistes, le mieux pour moi est quand même d'appliquer le fond au container du bloc texte.
En général on adapte pas l'arrière plan au texte mais l'inverse. Ca permet d'avoir une taille fixe d'un bloc de texte et donc l'image restera "propre".
La balise <p> en plus d'être facultative comme la plupart des balises texte (sauf pour un bon référencement naturel) est une balise dite "type en ligne" contrairement aux autre balises qui sont dites de "types bloc".
Par exemple une balise <div> délimite un espace rectangualire, si on lui met la propriété CSS background-color on aperçoit un rectangle adpaté soit à la taille de son contenu soit aux dimensions définies dans le code.
Si on fait un background-color sur une balise <p> on s'aperçoit que ce sont des lignes auquelles s'appliquent le fond de couleur, exactement comme si on surlignait le texte au marqueur.
Pour remédier à ça on peut
1°)
Mettre la balise de texte dans un div qui lui aura l'ilage de fond.
<div style="background-image: url(image.jpg);">
<p>
Mon texte a un fond rectangulaire.
</p>
</div>
soit 2°)Indiquer qu'ne balise "en ligne" devient une balise de "type bloc", avec la propiete css display:
<p style="background-image: url(image.jpg);DISPLAY: block;">
mon texte dans une balise de type bloc
</p>
Une autre astuce pour les images de fond est de leur donner des côtés symétriques pour donner une impression de continuité(pas de coupure de l'iamge entre chaque répétition).
Les propriétés background-repeat: permettent de ne pas répéter l'image de fond(avec : "no-repeat") de la répéter seulement horizontalement ou verticalement ( respectivement "repeat-x" et "repeat-y").
On peut positionner aussi la position de début de l'iamge de fond dans le cadre qu'elle occupe avec background-position: 50% 50%; (ici l'image est au milieu horizontal et milieu vertical)
Voila quelques pistes, le mieux pour moi est quand même d'appliquer le fond au container du bloc texte.