Come spostare un'immagine di sfondo con i CSS

Question

ho voluto inserire un bordo intorno a un tavolo che ha un'immagine di sfondo. Il confine funziona bene, ma quando faccio questo (si tratta di un confine 8px) l'immagine di sfondo viene tagliato fuori dal confine. Sono in grado di spostare l'immagine di sfondo per iniziare 8px verso destra e verso il basso 8px?

Answer 1

È possibile utilizzare il background-position:

background-position: 8px 8px;

Answer 2

si potrebbe anche utilizzare alcuni brevi mano.
background: <colour> <image url> <repeat> <left> <top> <scroll>

per il vostro Sarei pensando qualcosa del tipo:
background : transparent url(<location to img>) no-repeat 8px 8px scroll;

Answer 3

Invece di spostare manualmente l'immagine 8px, si dovrebbe ancorare l'immagine alla casella imbottitura ( verde nello schema qui sotto) al posto della scatola di confine ( giallo ). In questo modo sarà posto nell'angolo in alto a sinistra dell'immagine all'interno del confine, invece di dietro di esso.

background-origin: padding-box;

In questo modo sarà più facile manutenzione in quanto continuerà a funzionare anche se si modifica la larghezza del bordo.

È anche possibile impostare l'origine del fondo alla casella contenuto ( blu ):

background-origin: content-box;

Documentazione / Semplice Demo @ MDN