Comment puis-je positionner une image d'arrière-plan en haut à gauche et en bas à droite d'un élément html?

Question

J'ai un paragraphe et je souhaite avoir un "marqueur" visible pour montrer le début et la fin du paragraphe à l'utilisateur.

Je n'ai eu aucun problème pour montrer l'image d'arrière-plan en haut à gauche, mais je ne sais pas comment positionner l'image d'arrière-plan à l'extrémité inférieure droite. Voici mon css pour positionner l'image en haut à gauche:

p[class] { 
    background-image: url("../../image/my_image.gif"); 
    background-position: left top; 
    background-repeat: no-repeat; 
} 

Je cherche pas une solution en utilisant des éléments HTML supplémentaires !!! Il faut travailler avec css seulement! En raison du fait que le paragraphe a défini les éléments pseude-before et pseudo après, je ne suis pas capable de les utiliser ici. Donc la question est:

Comment puis-je positionner une image d'arrière-plan en haut à gauche et en bas à droite d'un élément html sans utiliser d'éléments html supplémentaires mais seulement css (et aucun pseudo-élément)?

Answer 1

Cyrille est proche mais faux. il doit être background-position: right bottom;

en général - il est possible d'utiliser des valeurs numériques. Donc, pour background-position: right bottom; vous pouvez également écrire background-position: 100% 100%; et background-position: left top; entraînerait une background-position: 0 0;

prennent également un regard sur les spécifications du W3C sur ce point: http://www.w3.org/TR/css3-background/#the-background-position

au commentaire de Sree de ci-dessus: ceci est complètement faux, left: 0px ; top:0px; ne se réfère à le positionnement de l'élément HTML lui-même lors de l'utilisation position:relative ou position:absolute

modifier: si vous souhaitez utiliser plusieurs arrière-plans vous pouvez le constater als suit:

p[class] { 
    background-image: url("../../image/my_image.gif"), url("../../image/my_image.gif"); 
    background-position: left top, right bottom; 
    background-repeat: no-repeat; 
} 

regard sur http://caniuse.com/#feat=multibackgrounds pour le soutien du navigateur croix

accueille

tom

Answer 2

Qu'en est-il d'essayer background-position: bottom right au lieu de left top?

Answer 3

Si le support du navigateur n'est pas un problème pour vous, vous pourriez faire avec CSS3 plusieurs origines: http://www.css3.info/preview/multiple-backgrounds/