background-color: 배경색
background-image: 배경이미지
background-repeat: 배경이미지의 반복 설정
background-position: 배경 이미지 위치 설정
background-size: 배경 이미지 크기 설정
background-attachment: 배경 이미지 스크롤 동작 설정
예제)
<body>
<div class="box">
<h2>배경이미지 예제</h2>
<p>배경이미지가 중앙에 위치하며 반복되지 않습니다</p>
</div>
</body>
box 클래스 스타일 정의
.box{
width: 100%;
height: 500px;
background-color: darkmagenta;
/* 배경이미지 반복 방지 */
background-repeat: no-repeat;
/* 상하 좌우 */
background-position: center center;
}
결과
'HTML CSS' 카테고리의 다른 글
| html/css) 폰트 font 관련 속성 (0) | 2025.06.03 |
|---|---|
| html/css) 디스플레이 display 속성, 인라인 inline & 블록 block (0) | 2025.06.03 |
| html/css) 박스모델이란 (0) | 2025.06.03 |
| html/css) css선택자 - 속성선택자 (0) | 2025.05.29 |
| html/css) css선택자 - 가상클래스 선택자 (0) | 2025.05.29 |