css posicionamiento de la imagen de fondo (posición negativa?)

Estoy tratando de agregar un icono que se encuentra en la parte superior del borde, dividiéndolo por la mitad.

Aquí está lo que tengo hasta ahora:

<code><html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
        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(Contents/img/icon_neutral.png);
            background-repeat: no-repeat;
            background-position:10px -20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>This is a test!</h1>
    </div>
</body>
</code>

En lugar de que la imagen esté sobre el borde como esperaba, está debajo.

Respuestas a la pregunta(4)

Su respuesta a la pregunta