[ HTML & CSS ] CSS background 속성을 사용해 이미지 넣기

 

 

html에 img 태그 말고도 backgroud를 사용해 이미지를 삽입할 수 있다

항상 이미지태그를 따로 사용하고 단순히 백그라운드 컬러 값만 주곤 했었는데,

이번에 알게 된 backgroud 속성을 사용하면 이미지를 backgroud로 이미지를 쉽게 넣을 수 있다.

 

 

 

📍 background

backgroud는 단축속성으로 아래의 하위 속성을 포함한다.

---

✔️ background 속성 및 기본값

background-attachment: scroll
background-clip: border-box
background-color: transparent
background-image: none
background-origin: padding-box
background-position: 0% 0%
background-repeat: repeat
background-size: auto auto

 

1️⃣ [background-attachment]

배경 이미지를 뷰포트 내에서 고정할지, 아니면 콘텐츠와 함께 스크롤할지 지정

scroll	배경 요소 자체에 대해 고정하며, 요소에 스크롤이 존재해도 배경은 함께 스크롤 X
fixed	뷰포트에 고정
local	요소 콘텐츠에 대해 고정하며 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤

2️⃣ [background-clip] 

배경 이미지가 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할지 지정

 

border-box	배경이 border 바깥 경계까지 차지
padding-box	배경이 boder 안쪽 경계까지 차지
content-box	배경이 콘텐츠 박스로 잘림
text	배경이 텍스트 형태로 잘림

3️⃣ [background-color] 

요소의 배경 색 지정

 

4️⃣ [background-image]

요소의 배경 이미지를 한 개 또는 여러 개 지정

 

· 여러 개의 배경 이미지는 쌓이게 되며, 맨 처음 지정한 이미지가 제일 위에 위치(여러 개의 이미지를 사용할 땐 쉼표로 구분)

· 테두리는 배경 이미지 위에, [background-color]는 밑에 그려짐

· 요소 박스와 테두리에 관련하여 배경 이미지를 어떻게 그릴지는 [background-clip]과 [background-origin] CSS 속성이 정의

· 유효하지 않은 URI를 지정하는 등 주어진 이미지를 그릴 수 없을 때 none 키워드를 사용한 것처럼 처리

 

5️⃣ [background-origin]

배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정

 

*background-attachment가 fixed인 경우 background-origin은 무시됨

 

border-box	배경을 테두리 박스에 상대적으로 배치(border 바깥 경계에)
padding-box	배경을 안쪽 여백 박스에 상대적으로 배치(border 안쪽 경계에)
content-box	배경을 콘텐츠 박스에 상대적으로 배치

 

6️⃣ [background-position]

배경 이미지의 위치를 설정

 

7️⃣ [background-repeat]

배경 이미지의 반복 방법을 지정

 

repeat	반복
no-repeat	반복하지 않음
repeat-x	x축으로만 반복
repeat-y	y축으로만 반복
space	요소가 잘리지 않을 만큼 이미지를 반복
round	가용 영역이 늘어나면 반복 이미지도 늘어나 여백을 남기지 않음

 

8️⃣ [background-size]

배경 이미지의 크기를 설정

 

contain	이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정하며, 여백이 발생할 수 있음
cover	이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정 이미지의 가로 세로비가 요소와 다르다면 이미지를 잘라 요소에 맞춤
auto	배경 이미지의 원본 크기를 유지
length와 percentage

 

9️⃣ [background]

단축 속성을 사용하면 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정

background: no-repeat center/80% url("../img/image.png")

background: url("starsolid.gif") #99f repeat-y fixed;

⚠️ background는 단축 속성으로,
background-clip과 같은 개별 속성을 별도로 지정해 주고 싶다면
단축 속성 뒤에 작성돼야 함! ⚠️

div{
	background: black url(img/image.jpg) no-repeat 50% 50% / center;
	background-clip: padding-box;
}

/* 잘못 작성예시 - 후자 우선의 원칙에 따라 단축속성인 background 속성만 적용 */
div{
	background-clip: padding-box;
	background: black url(img/image.jpg) no-repeat 50% 50% / center;
}

 

---

✔️ background 속성을 사용해 이미지 첨부하기

메인 이미지와 아이콘을 background 속성을 이용해 넣어보기

<div class="main-img"></div>
<button class="next-btn"></button>

 

.main-img {
  background: url(blue.jpg) no-repeat center;
  background-size: cover;
  width: 288px;
  height: 196px;
}
.next-btn {
  background: #29363d url(next.png) no-repeat center;
  background-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

 

카드 상단에 들어가는 이미지와 하단에 아이콘을 background 속성을 이용해 첨부했다.

 

 

웹페이지에 이미지를 넣는 방법에는 주로 <img> 태그나 CSS background 속성을 사용한다.

이미지가 페이지의 문맥상 정보를 제공하거나 이미지 최적화 등의 역할을 해야 한다면

배경이 아닌 <img> 태그를 사용하는 것이,

이미지가 별다른 정보 제공의 역할 없이 시각적인 스타일의 기능만을 하거나 최적화를 고려할 정도의 크기가 아니라면

배경으로 넣는 것이 좋다.