[CSS] 배경 속성으로 요소의 배경 설정하기

모든 HTML 태그는 박스 모델을 가지고 있다. 박스 모델에서 padding과 content 영역은 요소의 배경을 나타내는 영역인데,

이러한 박스 모델의 배경에는 색상이나 이미지와 같은 스타일을 지정할 수 있다.

 

1. background-color 속성

background-color 속성을 사용하면 요소의 배경에 색상을 넣을 수 있다. 속성값으로는 색상값을 사용하면 된다.

형식)
	background-color:<색상값>;

 

만약 div 태그로 작성된 요소의 배경을 빨간색으로 지정하고 싶다면 아래와 같이 작성하면 된다.

<style>
    div{
      width:100px;
      height:100px;
      background-color:red;
    }
</style>

 

코드를 실행하면 아래와 같이 div 요소의 배경에 빨간색이 적용된걸 확인할 수 있다.

 

 

---

 

 

2. background-image 속성

요소의 배경에 background-image 속성을 사용하면 이미지를 넣을 수 있다.

속성값은 삽입할 이미지의 경로를 url() 함수로 지정하면 된다.

형식)
	background-image:url('이미지 경로');

 

div 요소의 배경에 이미지를 넣어보면 아래와 같다

 

코드를 실행하면 div 요소에 이미지가 삽입된 걸 볼 수 있는데

여기서 background-image 속성을 사용할때 주의해야할 점이 두가지 있다

 

첫째,  background-image 요소의 배경 크기가 반드시 있어야 한다. 요소의 배경에 이미지를 삽입하는 원리이기 때문에 요소 배경의 너비와 높이를 지정하지  않으면 이미지가 보이지 않는다. 이 주의사항은 background-color에도 적용된다.

 

둘째, 이미지의 크기가 요소의 배경 크기와 맞지 않으면 어색하게 보인다.

예시로 요소의 배경이 삽입하려는 이미지보다 작은 경우 원본 이미지가 잘린다.

 

반대로 요소의 배경이 삽입하려는 이미지보다 크면 요소의 배경 너비에 맞추기 위해 이미지가 반복되어 채워진다.

 

 

---

 

3. background-repeat 속성

요소의 배경 크기가 삽입하려는 이미지보다 크면 이미지를 자동으로 반복해서 채운다.

이때 이미지 반복 설정을 바꾸려면 background-repeat 속성을 사용한다.

형식)	
	background-repeat:<속성값>;

속성값에 따라 바뀌는 설정은 다음과 같다

속성값	설명
no-repeat	이미지를 반복하지 않는다.
repeat-x	이미지를 가로 방향으로 반복한다.
repeat-y	이미지를 세로 방향으로 반복한다.
repeat	이미지를 가로와 세로 방향으로 반복한다.
round	이미지를 반복하되 이미지가 요소에 딱 맞도록 크기를 자동으로 조절한다.
space	이미지가 잘리지 않도록 반복한다.

 

 

---

 

4. background-size 속성

요소의 배경 크기가 이미지보다 크면 background-repeat 속성으로 해결할 수 있지만 요소의 배경 크기가 이미지보다 작을 때

이미지가 잘려 보이는 문제는 해결할 수 없다. 그 대신 background-size 속성으로 이미지 크기를 지정해서 처리할 수 있다.

형식)
	background-size:auto|cover|contain|<너비 높이>;

 

속성값은 auto, cover, contain을 사용학거나 크기를 직접 지정해도 된다.

속성값	설명
auto	이미지 크기를 유지한다.
cover	이미지의 가로 세로 비율을 유지하면서 크기를확대하거나 축소해 요소의 배경에 꽉 채운다.
contain	이미지의 가로 세로 비율을 유지하면서 이미지가 배경 요소 안에 들어가도록 크기를 확대하거나 축소한다.
<너비 높이>	이미지 크기를 직접 지정한다.

 

 

 

---

 

5. background-position 속성

background-position 속성으로 삽입하려는 이미지의 위치도 결정할 수 있다.

형식)
	background-position:<z 위치> <y 위치>;

위치별로 사용할 수 있는 속성값은 다음과 같다

위치	속성값	설명
x	lefft, center, right	x축(가로) 방향의 위치를 지정한다.
y	top, center, bottom	y축(세로) 방향의 위치를 지정한다.
공통	px, rem, em, %	위치를 직접 지정한다.

 

background-position 속성값은 1개만 사용해도 되고 2개를 사용해도 된다.

값을 1개만 사용하면 지정한 값은 x축 값이 되고 y축 값은 기본으로 center가 된다.

2개를 사용하면 각각 x축과 y축 값으로 지정된다. 

<style>
    div{
      width:320px; /* 원본 이미지보다 2배 크게 설정 */
      height:240px;/* 원본 이미지보다 2배 크게 설정 */
      border:1px solid black; /* 요소의 넓이가 잘 보이게 테두리 설정 */
      background-image:url('images/coffee.jpg');
      background-repeat:no-repeat;      
      background-position:100%;
    }
</style>

 

위의 코드를 적용하면 아래의 결과가 나온다.

 

요소의 배경 크기는 삽입하려는 이미지보다 2배 크다. 이 상태에서 이미지를 반복하지 않고

background-position 속성으로 x축 값만 100%로 지정하면 자동으로 y 축 값은 center가 된다.

100%는 비율에서 가장 큰 값이기 때문에 x축에 사용하면 가장 오른쪽, y축에 사용하면 가장 아래쪽을 의미한다.

 

 

---

 

 

6. background-attachment 속성

background-attachment 속성은 요소에 삽입된 이미지를 스크롤할 때, 이미지의 작동 방식을 결정한다.

형식)
	background-attachment:<속성값>;

사용할 수 있는 속성값은 아래와 같다.

속성값	설명
local	삽입된 이미지가 요소의 웹 브라우저에서 모두 스크된다.
scroll	삽입된 이미지가 요소에서는 고정되지만 웹 브라우저에서는 스크롤된다
fixed	삽입된 이미지가 요소와 웹 브라우저에서 모두 고정된다.

background-attachment 속성값은 작동 방식이 조금 복잡해 아래의 코드를 보면서 확인해 볼 수 있다.

 

1) local 적용

 .children 요소 내에서만 배경 이미지가 지역적으로 스크롤되어 움직이게 된다.

.parent 요소의 스크롤바를 이용하여 콘텐츠를 스크롤해도 배경 이미지는 그에 영향을 받지 않고

.children 요소 내에서만 스크롤되며  .parent 요소의 스크롤과 배경 이미지의 스크롤이 서로 독립적으로 처리된다.

 

2) scroll 적용

.children 요소 내에서 스크롤할 때 배경 이미지도 함께 스크롤되어 내용과 같이 움직이게 되며 스크롤바를 이용해 .parent 요소의 콘텐츠를 스크롤하면 배경 이미지도 그에 맞게 스크롤되어 움직이게 된다.

 

3) fixed 적용

배경 이미지가 고정되어 있어 .children 요소 내에서 스크롤해도 이미지가 고정된 상태로 유지된다.

 

 

---

 

7. background 속성

앞에서 정리한 배경 속성들은 한 번에 지정이 가능하다. 속성값을 나열하는 순서는 정해지지 않았지만 background-size 속성만은

항상 background-position 속성값을 먼저 작성하고 나서 슬래시(/)로 구분한 후에 사용해야 한다.

background:<color 속성값> <image 속성값> <repeat 속성값> <position 속성값/size 속성값> <attachment 속성값>;

 

아래와 같이 여러 속성을 사용하는 코드가 있다.

<div>
    background-color:red;
    background-image:url('images/coffe.jpg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%;
    background-attachment:fixed; 
</div>

 

위의 코드를 다음과 같이 단축송성인 background 속성으로 한 번에 지정할 수 있다.