Wie man ein Hintergrundbild mit CSS verschieben

Question

Ich wollte eine Grenze um einen Tisch setzen, die ein Hintergrundbild hat. Die Grenze funktioniert gut, aber wenn ich dies tun (es ist eine 8px Grenze) das Hintergrundbild wird von der Grenze abgeschnitten. Kann ich das Hintergrundbild verschieben 8px nach rechts zu beginnen und 8px nach unten?

Answer 1

Sie können die Hintergrund-Position verwenden:

background-position: 8px 8px;

Answer 2

Sie könnten auch einige kurze Hand benutzen.
background: <colour> <image url> <repeat> <left> <top> <scroll>

für Ihre i wie etwas denken würde:
background : transparent url(<location to img>) no-repeat 8px 8px scroll;

Answer 3

Anstatt das Bild manuell durch 8px Verschiebung, sollten Sie verankern nur das Bild mit dem Polsterfeld ( grün in der Abbildung unten) anstelle des Grenzfeld ( gelb ). Dadurch wird innerhalb der Grenze der oberen linken Ecke des Bildes zu platzieren, anstatt dahinter.

background-origin: padding-box;

Das macht die Wartung einfacher, da es nach wie vor noch funktioniert, wenn Sie die Rahmenbreite ändern.

Sie können auch den Hintergrund der Entstehung der Content-Box ( blau ) festgelegt:

background-origin: content-box;

Dokumentation / Einfache Demo @ MDN