CSS 탐구생활 : Background에 image 넣기

 

1. background-image 속성?

요소의 배경이미지를 한 개 또는 여러 개 설정해주는 속성

 

 

2. 배경 이미지 파일 불러오기

background-image 속성값중 url( )이 있는데 괄호안에 이미지 파일의 절대경로나 상대경로를 적어준다. 

배경 이미지를 여러 개 설정해주고 싶다면 ','를 통해 url을 여러개 가지고 온다.

 

 

3. 배경 이미지 크기 조정

background-size 속성을 사용한다. 속성값으로 px,em,%을 이용하여 width와 height값을 직접 설정할 수도 있고

contain과 cover라는 속성값을 사용할 수도 있다. contain은 이미지 전체가 보여지도록 설정해주고 배경이미지가 들어가는 요소의 크기에 따라 꽉 채워지지 않을 수 있다. cover는 요소를 다 덮을 수 있도록 이미지를 확대 또는 축소한다. 요소의 크기에 따라 이미지가 잘려서 나올 수 있다. 

 

 

4. 배경이미지 위치 조정

background-position 속성을 사용한다. 속성값으로 x-position, y-position이 들어간다.

x-position값 : left, right, center, px, em, 백분율, 길이 

y-position값 : top, bottom, center, px, em, 백분율, 길이

 

** background-position Default값 : 0%(top),0%(left) 

 

<예시>

.box{
    background-position: center;
    background-position: 20px 10px;
    background-position: 10% 20px;
    background-position: 1cm 2cm;
    background-position: bottom 10px left 20px;
}

 

 

5. 배경이미지 반복 설정

background-repeat 속성을 사용한다. 속성값으로 repeat, space, round, no-repeat등이 있다.

-- repeat : background-repeat의 디폴트 값, 요소의 배경영역을 다 채울때까지 반복, 넘칠 경우 잘라냄

-- space : 요소가 잘리지 않을 만큼 이미지 반복, 여백은 공백처리

-- round : 요소의 배경영역을 채우고 여백은 늘려서 꽉 채워지도록 함.

-- no-repeat : 반복을 사용하지 않음