Rechercher : dans
Par :

Adapter taille image ds bloc paragraphe html

Dernière réponse le 6 jui 2009 à 11:59:19 audrey, le 6 jui 2009 à 11:40:17 
 Signaler ce message aux modérateurs

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

Configuration: Windows XP Internet Explorer 6.0

Meilleures réponses pour « adapter taille image ds bloc paragraphe html » dans :
[Webmaster] Adapter un site à toutes les résolutions, le centrer VoirUne question récurrente sur ce forum est "Comment adapter mon site à la résolution du visiteur ? Quelle résolution choisir ?" Pas besoin de se compliquer la vie pour ça ! Comment faire Il suffit d'appliquer une largeur relative (=qui change selon...
Diminuer la taille d'une image VoirSi vous trouvez que vos photos sont trop grosses ou trop lourdes (par exemple pour envoyer par mail ou pour publier sur une page web), voici 4 étapes pour diminuer la taille des fichiers: Étape 1 (optionnel !) : Passer GREYCStoration sur...
Agrandir une image de petite taille VoirQuand l'ordinateur agrandit une image, il doit "inventer" les pixels manquants. Il existe différentes méthodes de calcul pour inventer ces pixels. Sommaire: Photo Dessin au trait Recommandations pour de meilleurs résultats Liens Le...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...
Paragraphes en HTML VoirParagraphes Le langage HTML considère les paragraphes comme des blocs de texte. Les navigateurs répartissent au mieux leur contenu dans la fenêtre à moins qu'=un attribut NOWRAP ou NOBR soit spécifié explicitement. A l'intérieur d'un paragraphe,...
Introduction au HTML VoirPrésentation du HTML Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent...

1

 yfev, le 6 jui 2009 à 11:59:19

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.

Répondre à yfev