CSS로 배경 이미지를 바꾸는 방법

Question

배경 이미지가있는 테이블 주위에 테두리를두고 싶었습니다. 테두리는 잘 작동하지만, 내가 이것을 할 때 (8px 테두리) 배경 이미지가 테두리에서 잘린다. 배경 이미지를 전환하여 8px를 오른쪽으로 시작하고 8px 아래로 내려갈 수 있습니까?

Answer 1

배경 위치를 사용할 수 있습니다.

background-position: 8px 8px;

Answer 2

짧은 손을 사용할 수도 있습니다.
background: <colour> <image url> <repeat> <left> <top> <scroll>

당신을 위해 나는 다음과 같은 생각을 할 것입니다.
background : transparent url(<location to img>) no-repeat 8px 8px scroll;

Answer 3

이미지를 수동으로 이동시키는 대신 8px, 이미지를 패딩 박스에 고정해야합니다 (초록 테두리 박스 대신 아래 다이어그램에서) (노란색). 이렇게하면 이미지의 왼쪽 상단 모서리가 테두리 뒤에있는 대신 테두리 안에 배치됩니다.

background-origin: padding-box;

테두리 너비를 변경하더라도 유지 보수는 여전히 작동하기 때문에 유지 보수가 더 쉬워집니다.

배경 원점을 콘텐츠 상자에 설정할 수도 있습니다 (푸른):

background-origin: content-box;

문서 / 간단한 데모 @ mdn