[CSS] background 이미지 넣기

background 이미지 넣기

• background-image란?
• background-image의 이미지 크기 정하기
• background-image의 이미지 반복 처리

---

background-image란?

background에 색상 대신 이미지를 넣고 싶은 경우 background-image를 이용하여 이미지를 넣을 수 있습니다. 이미지를 넣는 방법은 style의 값으로 background-image : url(이미지의 주소)를 주면 됩니다.

See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen.

---

background-image의 이미지 크기 정하기

background-image의 크기를 조절하기 위해서 div의 사이즈를 조절하면 이미지를 띄울 공간만 줄어들고 이미지는 그대로 있습니다. 따라서 background-size를 이용하여 조절할 수 있습니다. background-size의 값으로는 auto, contain, cover가 있으며 가로 세로의 픽셀을 직접 정하는 경우 아래의 예시처럼 x 길이 y길이 (background-size : 20px 50px) 혹은 x의 퍼센트 y의 퍼센트(background-size : 50% 80%)로 주시면 됩니다.

See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen.

---

background-image의 이미지 반복 처리

위의 예시에서 볼 수 있듯 이미지에 반복 설정을 하지 않는다면 자동으로 이미지를 반복합니다. 따라서 이미지를 반복하기 싫거나 x축 혹은 y축으로만 반복시키고 싶으신 경우는 background-repeat을 이용하면 됩니다. background-repeat의 값으로는 repeat, repeat-x, repeat-y, no-repeat 등이 옵니다. 순서대로 가로 세로 모두 반복, x방향으로만 반복, y방향으로만 반복, 반복 없음입니다.

See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen.

---

 

background에 색상 넣는 법 보러 가기