CSS 배경 속성은 요소의 배경 효과를 정의하는 데 사용됩니다. HTML 요소에 영향을 미치는 CSS 배경 속성은 5가지가 있습니다.

1. 배경색
2. 배경 이미지
3. 배경 반복
4. 배경 첨부
5. 배경 위치

1) CSS 배경색

background-color 속성은 요소의 배경색을 지정하는 데 사용됩니다.

배경색을 다음과 같이 설정할 수 있습니다.

 h2,p{ background-color: #b0d4de; } <h2>My first CSS page.</h2> <p>Hello Javatpoint. This is an example of CSS background-color.</p>  

산출:

내 첫 CSS 페이지.

안녕하세요 자바포인트입니다. CSS 배경색의 예입니다.

2) CSS 배경 이미지

background-image 속성은 이미지를 요소의 배경으로 설정하는 데 사용됩니다. 기본적으로 이미지는 전체 요소를 덮습니다. 이와 같은 페이지의 배경 이미지를 설정할 수 있습니다.

 body { background-image: url('paper1.webp'); margin-left:100px; }  

4) CSS 배경 첨부

background-attachment 속성은 배경 이미지가 고정되는지 또는 브라우저 창에서 페이지의 나머지 부분과 함께 스크롤되는지를 지정하는 데 사용됩니다. 배경 이미지를 고정하도록 설정하면 브라우저에서 스크롤하는 동안 이미지가 움직이지 않습니다. 고정된 배경 이미지를 사용하는 예를 들어보겠습니다.

 background: white url('bbb.webp'); background-repeat: no-repeat; background-attachment: fixed;  

5) CSS 배경 위치

background-position 속성은 배경 이미지의 초기 위치를 정의하는 데 사용됩니다. 기본적으로 배경 이미지는 웹페이지의 왼쪽 상단에 배치됩니다.

다음 위치를 설정할 수 있습니다.

1. 센터
2. 맨 위
3. 맨 아래
4. 왼쪽
5. 오른쪽

 background: white url('good-morning.webp'); background-repeat: no-repeat; background-attachment: fixed; background-position: center;