Cómo cambiar una imagen de fondo con CSS

Question

quería colocar un borde alrededor de una mesa que tiene una imagen de fondo. La frontera funciona bien, pero cuando hago esto (que es una frontera 8 píxeles) de la imagen de fondo se corta por la frontera. ¿Soy capaz de cambiar la imagen de fondo para empezar a 8 píxeles hacia la derecha y hacia abajo 8px?

Answer 1

Puede utilizar el background-position:

background-position: 8px 8px;

Answer 2

también se puede utilizar un poco de mano corta.
background: <colour> <image url> <repeat> <left> <top> <scroll>

para el suyo estaría pensando algo como:
background : transparent url(<location to img>) no-repeat 8px 8px scroll;

Answer 3

En lugar de desplazar la imagen de forma manual por 8px, sólo debe anclar la imagen a la caja de relleno ( verde en el diagrama de abajo) en lugar del cuadro de borde ( amarillo ). Hacer esto le coloque la esquina superior izquierda de la imagen dentro de la frontera en lugar de detrás de él.

background-origin: padding-box;

Esto hará más fácil el mantenimiento, ya que seguirá funcionando aunque se cambie el ancho del borde.

También puede establecer el origen de los antecedentes de la caja de contenido ( azul ):

background-origin: content-box;

Documentación / Demostración simple @ MDN