Using :before CSS pseudo element to add image to modal
http://caniuse.com/#search=::after
::after
and ::before
with content
are better to use as they're supported in every major browser other than Internet Explorer at least 5 versions back. Internet Explorer has complete support in version 9+ and partial support in version 8.
Is this what you're looking for?
.Modal::after{
content:url('blackCarrot.png'); /* with class ModalCarrot ??*/
position:relative; /*or absolute*/
z-index:100000; /*a number that's more than the modal box*/
left:-50px;
top:10px;
}
.ModalCarrot{
position:absolute;
left:50%;
margin-left:-8px;
top:-16px;
}
If not, can you explain a little better?
or you could use jQuery, like Joshua said:
$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");
1.this is my answer for your problem.
.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px; /*width of image*/
position: absolute;
}
You should use the background attribute to give an image to that element, and I would use ::after instead of before, this way it should be already drawn on top of your element.
.Modal:before{
content: '';
background:url('blackCarrot.png');
width: /* width of the image */;
height: /* height of the image */;
display: block;
}