CSS Hintergrundbild Positionierung (negative Position?)

Ich versuche, ein Symbol hinzuzufügen, das sich über dem Rand befindet und ihn in zwei Hälften teilt.

Folgendes habe ich bisher:

<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>

Anstatt wie ich gehofft hatte, dass das Bild über der Grenze ist, ist es darunter.

Antworten auf die Frage(4)

Ihre Antwort auf die Frage