[css] background

이 글을 부스트코스 강의를 기반으로 작성하였습니다.

background 속성

background 속성은 요소의 배경에 관련된 속성을 지정할 대 사용한다. 배경에 관련된 속성에는 색상, 이미지, 반복 여부 등 여러 속성이 존대하고, 이 속성들을 한 번에 모아서 사용할 수도 있다.

1. background-color

배경의 색상을 지정하는 속성

기본값: transparent

div { background-color: yellow }
div { background-color: rgb(255, 255, 255, 1) }
div { background-color: #a1c }

2. background-image

배경으로 사용할 이미지의 경로를 지정하는 속성

background-color에 색상이 적용된 상태라면, background-image로 사용된 이미지에 투명한 부분에 background-color의 색상이 노출된다.

div { background-image: url(절대경로 or 상대경로) }

3. background-repeat

이미지의 반복 여부와 방향을 지정하는 속성

기본값 : repeat

기본값이 repeat 이기 때문에 별도로 설정하지 않으면, x축, y축으로 반복되어서 표시된다.

속성 값

• repeat : x, y축 으로 모두 반복
• repeat-x : x축 방향으로만 반복
• repeat-y : y축 방향으로만 반복
• no-repeat : 이미지를 반복하지 않는다.

div { background-repeat: repeat-x }

4. background-position

기본값 : 0% 0% 요소에서 배경 이미지의 위치를 지정하는 속성

x축, y축으로부터의 위치를 지정할 수 있으면, 값의 선언 순서는 x축, y축 으로부터의 간격이다.

만약 한쪽만 지정된다면 나머지는 중앙 값으로 적용된다.

속성 값

• % : 기준으로부터 %만큼 떨어진 지점과 이미지의 %지점이 일하는 곳에 위치시킨다.
• px : 기준으로부터 px 만큼 떨어진 지점과 이미지의 (0, 0) (왼쪽 위) 지점이 일치하는 곳에 위치시킨다. (top, left, right, bottom, center 키워드를 사용할 수 있다.)

div { background-position: left center }
div { background-position: center top }
div { background-position: 50% 50% }
div { background-position: 50px 50px }

5. background-attachement

화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성

background-attachement 속성은 브라우저 성능에 영향을 미치기 때문에 잘 사용하지 않는다고 한다.

기본값 : scroll

속성값

• scroll : 배경 이미지는 요소 자체를 기준으로 고정되어 있으며 내용과 함께 스크롤되지 않는다.
• local : 배경 이미지는 요소의 내용을 기준으로 고정되어 있으며 내용과 함께 스크롤 된다.
• fixed : 배경 이미지는 ㄴ뷰포트를 기준으로 고정되어 있으며 스크롤에 영향을 받지 않는다.

뷰포트 : 사용자가 시각적으로 볼 수 있는 웹페이지의 영역을 의미한다.

div { background-attachement: fixed }

6. background 축약

background: [-color][-image][-repeat][-attachment][-position]

div { 
    background: yellow url(경로) no-repeat center top; 
}