html - css background image positioning (negative position?) -

I'm trying to add an icon that sits above the limit, dividing it into half.

Even I have so far:

  & lt; Html & gt; & Lt; Top & gt; & Lt; Meta http-equiv = "content-type" content = "text / html; charset = ISO-885 9-1" & gt; & Lt; Title & gt; Untitled document & lt; / Title & gt; & Lt; Style type = "text / css" & gt; Body {background-color: # 26140C; }. Box {width: 800px; Margin: 0 auto; Margin-top: 40px; Padding: 10px; Border: 3px solid # A5927C; Background color: # 3D2216; Background-image: url (content / img / icon_nurl.); Repeat Background: No Repetition; Background-position: 10px-20px; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "box" & gt; & Lt; H1 & gt; This is an exam! & Lt; / H1> & Lt; / Div & gt; & Lt; / Body & gt;  

I was expecting the image above the limit, below it.

The background image is within the box, so it is not possible to carry it out in this way. What you can do is position your image outside the box and move it to it.

You can try to do something like that, it is not easy, but you can find some way there.

pre & lt; & Lt; Top & gt; & Lt; Meta http-equiv = "content-type" content = "text / html; charset = ISO-885 9-1" & gt; & Lt; Title & gt; Untitled document & lt; / Title & gt; & Lt; Style type = "text / css" & gt; Body {background-color: # 26140C; }. Box {width: 800px; Margin: 0 auto; Margin-top: 40px; Padding: 10px; Border: 3px solid # A5927C; Background color: # 3D2216; } .image {float: left; Status: Relative; Top: -30px; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "box" & gt; & Lt; Img src = 'icon_neutral.png' square = "picture" /> & Lt; H1 & gt; This is an exam! & Lt; / H1> & Lt; / Div & gt; & Lt; / Body & gt;