¿Cómo puedo colocar una image de background en la parte superior izquierda y en la parte inferior derecha de un elemento html?

Obtuve un párrafo y deseo tener un "marcador" visible para mostrar el inicio y el final del párrafo al usuario.

No tuve ningún problema para mostrar la image de background en la esquina superior izquierda, pero no sé cómo colocar la image de background en el extremo inferior derecho. Aquí mi CSS para posicionar la image arriba a la izquierda:

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

¡No estoy buscando una solución con elementos html adicionales! ¡Tiene que funcionar solo con CSS! Debido al hecho de que el párrafo ha establecido los elementos pseude-before y pseudo after, no puedo usarlos aquí. Entonces la pregunta es:

¿Cómo puedo colocar una image de background en la parte superior izquierda y en la parte inferior derecha de un elemento html sin usar elementos html adicionales sino css solamente (y sin pseudo elementos)?

    3 Solutions collect form web for “¿Cómo puedo colocar una image de background en la parte superior izquierda y en la parte inferior derecha de un elemento html?”

    Cyrille está cerca, pero está equivocado. necesita estar background-position: right bottom;

    en general, es posible usar valores numéricos. Entonces para background-position: right bottom; de background-position: right bottom; también puede escribir background-position: 100% 100%; y background-position: left top; daría como resultado background-position: 0 0;

    también eche un vistazo a las especificaciones W3C en esto: http://www.w3.org/TR/css3-background/#the-background-position

    al comentario de sree de arriba: esto está completamente mal, left: 0px ; top:0px; left: 0px ; top:0px; se refiere al posicionamiento del elemento HTML en sí mismo al usar la position:relative o position:absolute

    editar: si te gusta usar múltiples backgrounds, puedes observarlo como sigue:

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

    mira http://caniuse.com/#feat=multibackgrounds para soporte de browser cruzado

    saluda

    tom

    Si la compatibilidad con el browser no es un problema para usted, podría hacerlo con múltiples backgrounds de CSS3: http://www.css3.info/preview/multiple-backgrounds/

    ¿Qué tal si testing background-position: bottom right lugar de a la left top ?

    Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.