배경에 이미지를 넣을 때 사용하는 기본적인 속성이다.
| 속성 | 속성값 | 설명 |
| background-color | color name, #fff(hex code), rgba(0,0,0,1) | 브라우저에서 지원하는 색상표현방법으로 모두 가능 |
| background-image | url('') | 이미지의 경로를 ' ' 안에 적는다. |
| background-repeat | no-repeat | repeat-x | repeat-y | 반복에 대한 속성 |
| background-attachment | scroll | fixed | 배경을 문서에서 스크롤할지 고정할지에 대한 속성 |
| background-position | left top | right bottom | center center | 배경 위치 속성 |
| background-size | auto | 100px 100px | cover | contain | 배경이미지의 크기에 대한 속성 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background관련속성-1</title>
<style>
body{
height:3000px;
}
div{
width:500px;
height:300px;
padding:20px;
background-color:lightblue;
background-image: url("img/img3a.gif"), url("img/img2a.gif");
background-repeat: repeat-x, no-repeat;
background-position:left top, right 50px bottom 50px;
/*background-attachment:fixed;*/
background-size:100px 100px, 50px 50px;
}
</style>
</head>
<body>
<h1>background 관련 속성</h1>
<ul>
<li>background-color : color name, #fff(hex code), rgba(0,0,0,1)</li>
<li>background-image : url('')</li>
<li>background-repeat : no-repeat | repeat-x | repeat-y</li>
<li>background-attachment : scroll | fixed </li>
<li>background-position : left top | right bottom | center center </li>
<li>background-size : auto | 100px 100px | cover | contain</li>
</ul>
<div>
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>
CSS background-attachment property
CSS background-attachment Property Example A background-image that will not scroll with the page (fixed): body { background-image: url("img_tree.gif"); background-repeat: no-repeat; background-attachment: fixed; } Try it Yourself » More "Try it Yours
www.w3schools.com
색상, 이미지, 반복, 고정,
body {
background-color: coral;
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| background 속성 3 - gradient (0) | 2021.01.25 |
|---|---|
| background속성 2 - attachment (0) | 2021.01.25 |
| display 속성 2, 가시속성 (0) | 2021.01.25 |
| display 속성 (0) | 2021.01.22 |
| 문단과 관련된 속성 (0) | 2021.01.22 |
