여태까지는 배경에 background-color을 이용해 색을 입히는 것만 했지만, 이미지를 제공하는 것 역시 가능하다.
이 때 사용하는 속성이 background-image이다.
배경이미지도 html에서 불러올때와 마찬가지로 url 혹은 경로를 지정하여 참조할 수 있다.
배경에도 다른 CSS와 마찬가지로 여러 프로퍼티가 존재한다.
- background-position : 배경이미지 위치
- background-size : 배경이미지 크기
- background-repeat : 반복출력
이를 이용한 예시를 보자.
<style>
div{
background-color: skyblue;
background-size: 100px 100px;
background-image: url("media/spongebob.png");
background-repeat: repeat-y;
background-position: center;
width: 200px;
height: 200px;
color: blueviolet;
font-size: 16px;
}
</style>
</head>
<body>
<h3>박스에 배경 꾸미기</h3><hr>
<div>SpongeBob is an over-optimistic
sponge that annoys other characters. </div>
</body>
background-size 프로퍼티를 통해 배경으로 쓰인 사진의 크기를 지정하고, position을 통해 사진을 중앙에 가도록 위치했다. repeat 프로퍼티는 방향을 결정할 수 있는데, x는 가로로, y는 세로로 반복될 수 있게 해준다.
반응형
'HTML+CSS+Javascript > CSS3' 카테고리의 다른 글
| 7. 마우스 커서 (0) | 2020.03.10 |
|---|---|
| 6. 시각적 스타일 (0) | 2020.03.09 |
| 4. 박스 스타일 (0) | 2020.03.09 |
| 3. 색과 텍스트 꾸미기 (0) | 2020.03.09 |
| 2. 셀렉터 (0) | 2020.03.05 |
