반응형
<!DOCTYPE html>
<html>
<head>
<style>
div{
font-size:100px;
height: 1000px;
border: 5px solid gray;
background-color: tomato;
background-image: url('run.png');
background-repeat: no-repeat; /*background-image를 반복할지 말지 정한다.*/
background-attachment: fixed; /*background-image를 스크롤할지 고정할지 정한다*/
background-size: 500px 100px; /*background-image 사이즈를 조정한다.*/
/*cover의 경우 배경 이미지가 넘쳐도 너비를 끝까지 채운다.*/
/*contain의 경우 화면 안에 다 보이도록 배경 이미지를 조정한다.*/
background-position: right top; /*background-image의 위치를 조정한다.*/
}
</style>
</head>
<body>
<div>
Hello world
</div>
</body>
</html>반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] 다단(multi column) (0) | 2024.03.06 |
|---|---|
| [CSS] float (0) | 2024.03.06 |
| [CSS] media query (0) | 2024.03.06 |
| flex (0) | 2024.02.19 |
| 포지션 (0) | 2024.02.19 |