CODEWITHSUNDEEP
htmlcss
Kyle
Kyle

Reputation: 4376

Draw a line on top of div with background image

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.

Upvotes: 3

Views: 9547

Answers (3)

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21758

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/

Upvotes: 4

Guilherme Oderdenge
Guilherme Oderdenge

Reputation: 5011

Have you considered using border-top? See:

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

Also available on jsFiddle.

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18133

Like this (add it to your style):

border-top: 20px solid red;

Upvotes: 0

Related Questions