html & css/개념
Background 스타일링
Doo Hee
2023. 11. 18. 19:20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 배경색 */
div {
background-color: aqua;
}
/* 배경 이미지 */
/* background: color, image, repeat, position */
body {
background-image: url(./css/cuteCat.jpg);
/* background-repeat: repeat-x(x축으로 반복); */
/* background-repeat: repeat-y(y축으로 반복); */
/* background-repeat: no-repeat; */
/* background-position: center top;
background-position: center center;
background-position: left center;
background-position: right top; */
/* background-position: right 20px top 50px; */
background-attachment: fixed; /* 이미지 위치 고정 */
/* background-attachment: scroll; 같이 스크롤되어 보이지 않음 */
background: pink url(./css/cuteCat.jpg) no-repeat right 20px top 50px;
background-attachment: fixed;
}
</style>
</head>
<body style="height: 800px"></body>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
<p>귀여워</p>
</html>