Draw a line on top of div with background image

Question

I have a div on my page that has a background image specified using the background-image property. I'd like to be able to draw a line on top of the background image using HTML/CSS (i.e. Not creating a separate image with the line drawn through the image). Is this possible?

CSS

#myDiv {
    background-image: url('myimage.png');
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
}

HTML

<div id="myDiv"></div>

EDIT

Sorry, by "on top of" I mean on top of in terms of z index, not on the top edge of the image. My apologies for not being clear. What I'm trying to do is draw a red slash line through the image.

Answer 1

If you don't want to add another HTML element, you can use the ::before/::after pseudo elements:

#myDiv {
    background-image: url('myimage.png');
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    position: relative;
}

/* this should draw a red line through the center of the image */
#myDiv:after {
    border-top: 1px solid red;
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
}

Live demo: http://jsfiddle.net/vHuHs/