How can i position a background image to the top left and bottom right of a html element?

Question

I got a paragraph and i wish to have a visible "marker" to show the start and end of the paragraph to the user.

I got no problem to show the backgroundimage on the upper left, but i do not know how to position the background-image to the lower right end. Here my css for positioning the image to the upper left:

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 needs to work using css only! Due to the fact that the paragraph has set pseude-before and pseudo after elements i am not able to use them here. So the question is:

How can i position a background image to the top left and bottom right of a html element without using additional html elements but css only (and no pseudo elements)?

Answer 1

Cyrille is near but wrong. it needs to be background-position: right bottom;

in general - its posible to use numeric values. So for background-position: right bottom; you can also write background-position: 100% 100%; and background-position: left top; would result in background-position: 0 0;

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

to sree's comment of above: this is completely wrong, left: 0px ; top:0px; does refer on positioning of the HTML element itself when using position:relative or position:absolute

edit: if you like to use multiple backgrounds you can note it 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;
}

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

greets

tom

Answer 2

If browser support is not a problem for you, you could do with CSS3 multiple backgrounds: http://www.css3.info/preview/multiple-backgrounds/