logo

CSS 배경

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

.tostring 자바
 body { background-image: url(&apos;paper1.webp&apos;); margin-left:100px; } 
지금 테스트해보세요

4) CSS 배경 첨부

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

 background: white url(&apos;bbb.webp&apos;); background-repeat: no-repeat; background-attachment: fixed; 
지금 테스트해보세요

5) CSS 배경 위치

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

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

  1. 센터
  2. 맨 위
  3. 맨 아래
  4. 왼쪽
  5. 오른쪽
 background: white url(&apos;good-morning.webp&apos;); background-repeat: no-repeat; background-attachment: fixed; background-position: center; 
지금 테스트해보세요