HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background</title>
<link href="style.css" rel="stylesheet">
<link href="bgimg.css" rel="stylesheet">
</head>
<body>
<h1>background - 배경</h1>
<ol>
<li>background-color:색상값; 배경색상</li>
<li>background-image:url("이미지경로"); 배경이미지 </li>
</ol>
<h2>background-image 2개 지정</h2>
<p>background-image:url("이미지1경로"), url("이미지2경로");</p>
<h2>background-image의 속성들</h2>
<ul>
<li>background-repeat:repeat/repeat-x/repeat-y/no-repeat;
반복 지정
<ol>
<li>repeat (기본) 양사방 반복</li>
<li>repeat-x 가로로만 반복</li>
<li>repeat-y 세로로만 반복</li>
<li>no-repeat 반복 안함</li>
</ol>
</li>
<li>background-position: ; 위치 지정
<ol>
<li>left/center/right top/center/bottom 의 조합</li>
<li>Xn Yn - 가로 세로 순서로 직접 지정</li>
</ol>
</li>
<li>background-size: ; 크기 지정
<ol>
<li>cover - 이미지 하나로 영역을 다덮기 <br>
(이미지 잘려나갈 수도 있음) </li>
<li>contain - 영역의 가로나 세로에 맞춰 이미지로 덮기<br>
(이미지 잘려나가지 않음)</li>
<li>Xn Yn - 가로 세로 순서로 직접 지정</li>
</ol>
</li>
<li>background-attachment: ; 스크롤 여부 지정
<ol>
<li>scroll - (기본)스크롤 </li>
<li>fixed - 고정</li>
<li>local - 영역에서...</li>
</ol>
</li>
</ul>
<section id="sec01">
<h2>background-attachment: ; 스크롤 여부</h2>
<div>
background-attachment:scroll;
- 특정영역의 스크롤바에는 고정, 브라우저 스크롤바에는 스크롤<br>
background-attachment:fixed;
- 특정영역의 스크롤바와 브라우저에 모두 고정<br>
background-attachment:local;
- 특정영역의 스크롤바와 브라우저에 모두 스크롤
</div>
<p class="ba01"><b>background-attachment:scroll ;</b> <br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<b>background-attachment:scroll ;</b> <br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<b>background-attachment: scroll;</b> <br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<b>background-attachment: scroll;</b> <br>
</p>
<p class="ba02"><b>background-attachment:fixed ;</b> <br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<b>background-attachment: fixed;</b> <br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<b>background-attachment: fixed;</b> <br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<b>background-attachment: fixed;</b> <br>
</p>
<p class="ba03"><b>background-attachment:local ;</b> <br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<b>background-attachment:local ;</b> <br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<b>background-attachment:local ;</b> <br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<b>background-attachment:local ;</b> <br>
</p>
</section>
<br><br><br><br><br><br><br><br><br>
</body>
</html>
CSS
@charset "UTF-8";
body {
background-image:url("img/jpg/european.jpg")
, url("img/jpg/mountain.jpg");
background-repeat: no-repeat, repeat-x; /* */
background-position:right 50px, left bottom;
/*background-size: ;*/
background-attachment:scroll,fixed;
}
ol {background-color: #ccc;
margin: 5em 3em;
padding: 1.5em 2em;
width:500px;
font-weight: bold;}
ul ol {background-color: transparent;
margin: 0 2em;
padding: 1.5em;
width:100%;;
font-weight: normal;}
li {font-size: 20px;
line-height: 2; }
/* background-attachment */
#sec01 {overflow: hidden;}
#sec01>p {border: 3px solid #d00;
width: 30%; height: 400px;
/* display: inline-block; */
float: left;
margin-right: 1.3%;
background-image: url("img/jpg/shahbaz.jpg");
background-size:cover;
background-position: center center;
overflow: auto; }
.ba01 {background-attachment: scroll;}
.ba02 {background-attachment: fixed;}
.ba03 {background-attachment: local;}
