고정 헤더 영역
상세 컨텐츠
본문
CSS애서 사용할 수 있는 background 속성은 아래와 같다.
1. background-color (배경색 속성)
2. background-image (배경색 이미지)
3. background-repeat (반복 유무)
4. background-position (상대 위치 설정)
5. background-attachment (해당 위치에 고정)
1. background-color 속성
1. background-color 속성은 HTML 요소의 배경색를 설정합니다.
<style>
body { background-color: lightblue; }
h1 { background-color: rgb(255,128,0); }
p { background-color: #FFFFCC; }
</style>
</head>
<body>
<h1>CSS를 이용한 배경색 설정입니다.</h1>
<p>각 HTML 요소에 개별적으로 배경색을 설정할 수 있습니다.</p>
</body>
2. background-image 속성
<title>배경 이미지</title>
<style>
body {background-image: url(./CSS/hamster1.png);}
</style>
</head>
<body>
<h1>CSS를 이용한 배경이미지 설정입니다.</h1>
</body>
여기에 background-repeat: repeat-y; 을 추가하면 수평 반복을 보여줌
background-repeat: repeat-x; 수직 반복을 보여줌
background-repeat: no-repeat; 배경 이미지가 반복되지 않고 한 번만 나타나게 하기.
<style>
body {
background-image: url("/examples/images/img_man.png");
background-repeat: no-repeat;
background-position: top right;
}
</style>
</head>
<body>
<h1>CSS를 이용한 배경이미지 설정입니다.</h1>
<p>배경이미지가 지정된 위치에 나타납니다.</p>
</body>
이 속성에서 사용할 수 있는 키워드의 조합은 다음과 같다.
1. left top
2. left center
3. left bottom
4. right top
5. right center
6. right bottom
7. center top
8. center center
9. center bottom
반응형
'WEB-Front end > *CSS' 카테고리의 다른 글
| [CSS] CSS font-size에 대해서 알아보자. (0) | 2023.04.20 |
|---|---|
| [CSS] CSS 텍스트 (0) | 2023.04.20 |
| [CSS] CSS색상 (0) | 2023.04.20 |
| [CSS] CSS 선택자 (0) | 2022.11.10 |
| CSS 기초(정의, 링크, 문법)를 알아보자. (0) | 2022.07.09 |
댓글 영역