CSS 문서 배경 관련 스타일 속성 정리

background-color 속성

HTML 문서에 배경색 변경을 위해서는 background-color 속성을 사용하면 됩니다. 

배경 지정은 body 태그뿐만이 아닌 일반적인 텍스트 태그 및 기타 태그에도 적용이 되며, 16진수 방식이나 rgb 코드 색상 컬러 문자열 등을 지정해서 사용할 수 있습니다.


background-color 예제


<style>
    .conainer    {            
        background-color: blueviolet;            
    }
</style>
</head>
<body>
<div class="container">
   
</div>
</body>




배경 적용 범위 background-clip, background-origin 속성

background-color 속성을 이용해 배경색을 지정했을 때, 적용되는 배경 색의 적용 범위를 박스 모델 관점에서 조절하고 싶을 때 background-clip 속성을 사용하면 됩니다. 

밑에서 알아볼 background-image 속성을 사용한 경우에는 background-origin 속성을 사용해서 적용 범위를 지정할 수 있으며 속성값 리스트는 clip과 같습니다.


background-clip, background-origin 속성값 리스트

속성값
내용
border-box박스 모델에서 테두리영역 까지 적용(기본값)
padding-box 박스 모델에서 padding 영역까지 적용
content-box박스 모델에서 콘텐츠 영역까지 적용



background-image 속성

단순한 배경색이 아닌 이미지 파일을 배경으로 지정하고 싶을 때는 background-image 속성을 사용하면 됩니다. 

파일은 로컬 파일 경로를 지정해서 사용이 가능하고, 이미지 파일의 url을 넣어 인터넷상에 있는 이미지 파일을 사용할 수도 있습니다.



background-image 기본형

<style>
    body    {            
        background-image : url('https://cdn.pixabay.com/photo/2022/12/02/18/37/middle-spotted-woodpecker-7631440_1280.jpg')
    }
</style> 




배경 이미지 반복 여부를 지정 background-repeat 속성

기본적으로 background-image 속성을 사용해서 이미지를 배경으로 사용할 경우, 이미지의 크기가 화면크기보다 작거나 할 때는 기본값으로 브라우저 화면을 가득 채울 때까지 반복하여 표시되게 됩니다. 

background-repeat 속성을 사용하면 반복하지 않고 단일 이미지로 표시하거나 이미지를 늘려서 화면을 채울 수도 있습니다.



background-repeat 속성값

속성값
내용
repeat
기본값으로 배경 이미지를 화면에 가득채울때까지 반복
repeat-x
배경 이미지를 가로 방향으로만 반복
repeat-y
배경 이미지를 세로 방향으로만 반복
no-repeat
반복하지 않고 단일 이미지로 표시



배경 위치 변경 background-position 속성

배경의 위치를 변경할 수 있는 background-position 속성은 수평과 수직을 기준으로 변경이 가능하며 첫 번째 값이 수평 위치이고, 두 번째 값이 수직 위치를 지정하게 됩니다. 

지정할 수 있는 값의 단위는 위치를 문자열로 넣거나 백분율, 숫자 등을 넣어 사용할 수 있습니다.



background-position 예제

<style>
ul  {
    list-style : none;            
}
li  {
    margin-bottom : 10px;
    background-image : url('./apple.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left : 30px;
}

</style>
</head>
<body>
<h1>배경 관련 예제</h1>
<ul>
<li>맥북 프로</li>
<li>아이패드 프로</li>
<li>아이폰</li>
<li>애플워치</li>
<li>에어팟</li>
</ul>
</body>
CSS-background-예제
background-image를 이용해서 li태그 앞에 이미지를 추가한 예제입니다.


배경 고정 기능 background-attachment 속성

브라우저상에서 스크롤을 하면 웹문서 내용과 함께 배경 이미지도 같이 이동하게 됩니다. 

background-attachment 속성을 사용하면 배경 이미지를 고정할 수 있습니다.



background-attachment 속성값 리스트

속성값
내용
scroll
스크롤과 함께 배경 이미지도 스크롤(기본값)
fixed
스크롤시 배경이미지는 고정되고 HTML 문서 내용만 스크롤됨.



배경 이미지 크기 조절 background-size 속성

브라우저 창의 크기보다 배경 이미지가 작을 경우 background-size 속성을 이용해 배경 이미지 크기를 조절할 수 있습니다.


background-size 속성값

속성값
내용
auto
원래 이미지 크기로 표현(기본값)
contain
지정된 HTML 요소의 크기만큼 배경 이미지 크기가 결정됨.
cover
배경 이미지가 HTML 요소를 다 덮도록 이미지 크기가 변경됨.
크기
이미지의 너비와 높이를 숫자로 지정, 하나만 지정할 경우 너비에 적용되며 높이는 너비에 맞게 자동 비율로 계산되어 적용됩니다.
백분율
배경이미지의 원래 크기에서 비율만큼 이미지 크기를 변경



배경 관련 모든 스타일 속성은 background 속성으로 한번에

위에서 알아본 background-repeat, position, attachment 속성들을 모두 사용하는 경우 따로 지정하기보다는 background 속성에 한 번에 작성하여 적용할 수 있습니다. 

각 속성값에 순서는 없으며 공백으로 구분해 주면 됩니다.



background 속성 사용 예제

background-image : url('이미지 경로') repeat-x left center fixed;