Como mudar a imagem de fundo com css

Question

Eu queria colocar uma borda ao redor de uma mesa que tem uma imagem de fundo. A fronteira funciona bem, mas quando eu faço isso (é uma fronteira 8px) a imagem de fundo é cortada pela fronteira. Am I capaz de mudar a imagem de fundo para começar 8px para a direita e 8px baixo?

Answer 1

Você pode usar o background-position:

background-position: 8px 8px;

Answer 2

Você também pode usar uma mão curta.
background: <colour> <image url> <repeat> <left> <top> <scroll>

para vocês eu estaria pensando algo como:
background : transparent url(<location to img>) no-repeat 8px 8px scroll;

Answer 3

Ao invés de mudar a imagem manualmente, 8px, você deve apenas ancorar a imagem para a caixa de preenchimento ( verde no diagrama abaixo) em vez da caixa de fronteira ( amarelo ). Fazendo isso vai colocar o canto superior esquerdo da imagem Dentro da fronteira, em vez de por trás dele.

background-origin: padding-box;

Isto irá facilitar a manutenção, uma vez que ainda funcionará mesmo se você alterar a largura da borda.

Você também pode definir a origem do fundo para a caixa de conteúdo ( azul ):

background-origin: content-box;

Documentação / Simples Demonstração @ MDN