background 속성

영역 안에 배경으로 색이나 이미지를 깔 경우에 사용하는 속성은 background이다.

정말 다양한 서브 속성들이 있다.

1. background-color

배경색 적용 background-color: #369;

투명한 색은 background-color: transparent;

2. background-image

배경이미지 적용 background-image: url(주소);

3. background-position

배경이미지의 어느 부분을 배경으로 보여줄 것인가. 즉 위치를 지정하는 속성이다.

background-position: x축 y축;

x, y축 중에 하나만 쓰면 나머지는 가운데로  자동 지정된다.

x축 : left, right, center

y축 : top, middle, bottom

단위 사용도 자유로움

4. background-size

영역 안에 배경이미지를 어느정도의 크기로 보여줄 지 정하는 속성

background-size: width값, height값

한가지 값만 지정하면 나머지는 auto(default value)

속성값

auto : 원래 배경이미지의 width, height값으로 보여줌

cover: 이미지의 비율을 유지한 채, 배경영역이 배경이미지로 완전히 덮이도록 이미지를 크게 확장하여 보여줌. 너비 비율에 따라 가로나 세로를 자동으로 잘라서 보여준다. 

contain: 이미지의 비율을 유지한 채 잘리지 않은 온전한 모습으로 배경영역 안에서 제일 큰 이미지로 보여줌. 

initial: auto값으로 초기화

5. background-repeat

배경영역 안에서 배경의 반복여부를 나타내는 속성. default값은 repeat

속성값

repeat : 반복

repeat-x : x축으로 반복

repeat-y : y축으로 반복

no-repeat : 반복 안함

6. background-attachment

배경의 고정방식을 나타내는 속성

속성값

scroll : 배경은 요소 자체를 기준으로 고정되어 있다. 기본값이며, 내용이 스크롤되어도 배경은 따라가지 않는다. 테두리 부분에서 변화가...

fixed : 배경은 화면을 기준으로 고정되어 있다. 배경영역이 스크롤 되어도 배경이미지는 고정

local : 배경은 요소의 내용을 기준으로 고정되어 있다. 배경역역이 scroll되면 이미지도 따라서 scroll된다.

7. background-clip, background-origin

clip은 배경이미지가 잘리는 경계를 표시. border, padding, content중 하나

origin은 배경이미지가 시작되는 경계를 표시. border, padding, content중 하나

의미는 다르지만 서로 쓰임새가 비슷하다.

background-origin: border-box | padding-box | content-box ( border부터, padding부터[default value], content부터)

background-clip: border-box | padding-box | content-box | background-clip: text; color: transparent;

(origin과 같으나 text는 text에 이미지를 넣는 방법이다.)

8. background 축약속성

background : orange url('heart.jpg') no-repeat fixed center middle / 50% 50%;

background-color

background-image

background-repeat

background-attachment

background-position

background-size