[CSS] 배경 설정 방법 및 속성 알아보기

스타일 시트를 이용한

배경 지정하기

 

 

스타일 시트를 이용하면 색상으로 배경을 설정 할 수 있으며 또한 이미지로 배경을 지정 할 수도 있습니다.

이번 시간에는 배경을 지정하는 방법에 대하여 알아보도록 하겠습니다.

 

background-color

설명 : 배경색 지정

속성값 : 색상명 또는 RGB 값

사용예 : <span style="background-color: #d4f4fa">배경색 지정하기</span>

결과 : 배경색 지정하기

 

background-image

설명 : 배경 이미지 지정

속성값 : 배경 이미지의 URL

사용예 : <span style="background-image:url(https://t1.daumcdn.net/cfile/tistory/99B222335A71E96530);">이미지로 배경 지정하기</span>

결과 : 이미지로 배경 지정하기

※ 예 지정 이미지는 상단 대표이미지 입니다.

 

background-repeat

설명 : 배경 이미지 반복 설정

속성값 : no-repeat, repeat-x, repeat-y, repeat

사용예 : style="background-image:url(주소지정); background-repeat:속성지정"

※ 배경이미지에 대한 반복 설정이기 때문에 배경이미지를 설정하고 해당 설정을 하시면 됩니다.

 

background-attachment

설명 : 배경 이미지 고정 또는 스크롤 설정

속성값 : fixed, scroll, local

 

background-position

설명 : 배경 이미지 위치 설정

속성값 : top, bottom, left, right, center

 

더 다양한 예제는 다음 포스팅 또는 블로그 꾸미기 포스팅 시에 올리도록 하겠습니다. ^^