martin j martin j - 1 month ago 5
CSS Question

Icon as the background in top right corner

I am working with an image that is part of an error message. I have managed to create everything but one small detail. The icon in the top right corner that is part of the backgrounds of the error message. I have never done anything like this before and I'm working with a responsive design.

I have created a fiddle with the code I have so far and I will later add JavaScript to make the message box close when the

X
is pressed:

JSFiddle: https://jsfiddle.net/kLw6a8zr/

The picture I am working from:

enter image description here

MJN MJN
Answer

Replace .net-content classwith following code

.n-content {
    width:100%;
    min-height:120px;
    background-color:#d45659;
    box-shadow:0 0 15px 1px rgba(0, 0, 0, 0.4);
    box-sizing:border-box;
    overflow:hidden;
    background-image: url(http://i1167.photobucket.com/albums/q627/deskdecode/alert-min_zpsz7khasfs.png);
    background-position: 95% -50%;
    background-repeat: no-repeat;
    background-size: 160px;
 }

updated fiddle

Comments