How can I place a background image in the upper left and lower right of the html element?

Question

I have a paragraph, and I want to have a visible “marker” to show the user the beginning and end of the paragraph.

I did not hurt to show the background image in the upper left corner, but I do not know how to position the background image in the lower right end. Here is my css for positioning the image in the upper left corner:

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

I am not looking for a solution using additional html elements !!! It should work using only css! Due to the fact that pseudo-random and pseudo-elements after the elements are specified in the paragraph, I cannot use them here. So the question is:

How to place a background image in the upper left and lower right corner of an html element without using additional html elements, but only css (and without pseudo-elements)?

Answer 1

Cyril is close, but wrong. it should be background-position: right bottom;

in general - it can use numerical values. Therefore, for background-position: right bottom; you can also write background-position: 100% 100%; and background-position: left top; will result in background-position: 0 0;

also take a look at the W3C specs: http://www.w3.org/TR/css3-background/#the-background-position

in sree comment above: this is completely wrong, left: 0px ; top:0px; left: 0px ; top:0px; refers to the positioning of the HTML element itself when using position:relative or position:absolute

edit: if you want to use multiple backgrounds, you may notice that als follows:

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

see http://caniuse.com/#feat=multibackgrounds for cross browser support

welcomes

Tom

Answer 2

If browser support is not a problem for you, you can use several CSS3 backgrounds: http://www.css3.info/preview/multiple-backgrounds/

Answer 3

How about trying background-position: bottom right instead of left top ?