how to prevent <mark> background overlapping other text

Question

i need to create a text withs some markings that need to look a bit customized ( using an image )
i used the background-property and padding like so:

mark{
    padding:10px;
    background:url(http://www.fillmurray.com/200/300);  
    background-repeat: no-repeat;
}

which works as planned, but the backgroundimage is obscuring the previous text-line. adding a z-index also did not work. see fiddle: fiddlelyfidd

any ideas on how to send it to the back?

thanks

Answer 1

try to add background-position: 0px 10px; it's working fine

   mark{
        z-index:-10;
        padding:10px;
        background:url(http://www.fillmurray.com/200/300);  
        background-repeat: no-repeat;
       background-position: 0px 10px;

    }

check this updated jsfiddle

Answer 2

You can use css declaration background-clip: content-box .

Moreover, padding and z-index may be useless. Please see below.

 body{ background-color:#666666; color:white; } mark{ /*z-index:-10;*/ /*padding:10px;*/ background:url('http://www.fillmurray.com/200/300'); background-repeat: no-repeat; background-clip: content-box; } 

 <p> “Higher up now we mark the gony, or gray albatross, anomalously so called, an unsightly, <mark>unpoetic bird, unlike its storied kinsman, which is the snow-white ghost</mark> of the haunted Capes of Hope and Horn.” Excerpt From: Melville, Herman. “Billy Budd and Other Stories.” iBooks. </p>