[잡담] 인장에 배경 넣기

background-color

background-image

background-repeat

background-position

오늘은 위 내용을 알아보겠습니다.

background-color

말그대로 배경색을 지정하는 코드입니다.

<div style="background-color: #CCC;">내용</div>

결과물:

내용

background-image

배경 이미지를 지정하는 코드입니다.

<div style="background-image: url(이미지주소);">내용</div>

예시:

내용

여기서 중요한 것이 있습니다.

그냥 배경 이미지를 지정하게 되면

div의 크기가 배경 이미지보다 커졌을 때,

이미지가 패턴화되어 반복돼서 나타납니다.

이걸 방지하기 위해 background-repeat: no-repeat을 적용해줄 수 있습니다.

<div style="background-image: url(이미지주소); background-repeat: no-repeat;">내용</div>

예시:

내용

background-position

인장에 배경을 넣다 보면

인장은 세로로 긴데 배경이 왼쪽 위를 기준으로 시작돼서 안맞는 경우가 있습니다.

그럴때는 background-position을 사용하시면 됩니다.

사용법은 기본적으로 background-position: x y입니다.

예를들어, 오른쪽 아래를 기준으로 하고 싶으시면

background-position: right bottom 이라고 쓰시면 됩니다.

여기 예시가 있습니다. 참고해서 사용하세요.

left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

right, bottom 등 대신 % 수치나 px값을 사용할수도 있습니다.

왼쪽 위를 기준으로 왼쪽에서 12px 떨어뜨리고 싶으면

background-position: 12px top 이런식으로 하시면 됩니다.

<div style="background-image: url(배경이미지주소); background-position: x y">내용</div>