Rembourrage HTML HTML de code

Question

J'essaie d'utiliser CSS et HTML pour insérer une image dans une page Web.

Je suit sur CSS:

#eDTP { 
background-image: url(eDTP.png); 
background-repeat: no-repeat; 
background-position: center; 
padding-top:475px; 
} 

et dans mon HTML, j'ai:

<div id="maintext"> 
<p> my page </p> 
</div> 
<div id="eDTP"></div> 

Bien que cela fonctionne, j'ai un grand espace blanc sur le haut et le bas de la images, que je ne veux pas. J'ai essayé d'ajuster les valeurs de remplissage, mais cela ne semble pas vraiment aider.

Quelqu'un pourrait-il me diriger dans la bonne direction pour me débarrasser de ces espaces blancs?

Answer 1

Je voudrais retirer le haut de rembourrage. Cela devrait éliminer le problème. Je ne sais pas pourquoi vous auriez besoin d'une telle quantité de rembourrage entre eux.

EDIT - Il suffit de lire que vous dites que le rembourrage ne vous a pas aidé. Une chance d'un lien vers l'URL? Ou un exemple vivant quelque part pour voir le problème plus en détail?

Answer 2

La seule taille que vous avez spécifiée est padding. La taille d'une image d'arrière-plan n'affecte pas la taille de l'élément. Vous devez supprimer le padding et spécifier width et height pour l'élément afin qu'il soit de la même taille que l'image.

Answer 3

Malheureusement, il n'y a aucun moyen de le faire en HTML/CSS. Le seul moyen de le faire est d'insérer les valeurs sur votre serveur ou côté client par javascript. Vous devriez vraiment le faire avec des balises <img> à l'intérieur de votre élément <div> comme ça.

Assurez-vous de pointer vers le bon emplacement de l'image que vous souhaitez afficher en rapport avec le dossier où il est appelé.

http://jsfiddle.net/gKFAT/

Answer 4

Ici, vous essayez de montrer une image en arrière-plan pour une div. Y a-t-il vraiment de bonnes raisons de ne pas utiliser html comme ci-dessus?

<div id="maintext"> 
<p> my page </p> 
</div> 
<div id="eDTP"> 
    <img src="eDTP.png"> 
</div> 

Si oui, vous devez spécifier les dimentions de votre di, parce que cela n'a pas Redimensionner automatiquement la taille de l'arrière-plan (pas de surprise ici, je pense).

Essayez

#eDTP { 
background-image: url(eDTP.png); 
background-repeat: no-repeat; 
background-position: center; 
width: 120px; //background image width here 
height: 150px; // and height here 
} 

Answer 5

Assurez-vous que le line-height de la figure ou de l'élément environnant est réglé sur line-height:1;

Answer 6

Votre plus gros problème est la largeur et la hauteur. Aussi, comment voulez-vous que cette image soit affichée? Voulez-vous le sous le texte, sur le côté du texte, etc? Dans les navigateurs modernes, un div est entièrement réduit et sa hauteur est égale à 0. Sa largeur, par défaut, est de 100%. IE7 et plus ne fonctionne pas de cette façon pour la hauteur.

Vous devez spécifier, pas de remplissage, mais la largeur et la hauteur de votre conteneur div, eDTP, c'est-à-dire si vous souhaitez ajouter l'image d'arrière-plan via CSS. Si vous souhaitez avoir une image qui remplit eDTP en utilisant la balise img, vous n'avez pas besoin de spécifier la hauteur.D'ailleurs, la raison pour laquelle vous voyez votre image avec le rembourrage est basée sur quelque chose appelé le modèle de boîte. Le remplissage étend la zone visible de la couleur d'arrière-plan, une image d'arrière-plan et d'autres. Le rembourrage que vous avez fonctionne comme si vous aviez une hauteur assignée à son conteneur. Mais comme je l'ai déjà dit, c'est une très mauvaise façon de le faire. Ajoutez ceci à votre déclaration eDTP:

#eDTP { 
background: url(eDTP.png) no-repeat center; 
width:500px; /* Change this value to the width of your image */ 
height:475px;/* I assume this is the height of your image */ 
}