| background == background-color | 배경색을 지정 |
| background-image | 배경이미지를 지정 |
| background-position | 배경이미지의 위치를 지정 |
| background-repeat | 배경이미지의 반복여부를 지정 |
| background-size | 배경이미지의 크기를 지정 |
| background-attachment |
배경이미지의 스크롤 여부를 지정 |
예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
width: 100%;
/*
background-color: green;
background-image: url("back.png");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
*/
/* 위와동일 */
background: green url('images/back.jpg') no-repeat center fixed;
-webkit-background-size : cover;
-moz-background-size : cover;
-o-background-size: cover;
background-size: cover;
}
.main{
width: 800px;
/* opacity 찾아보기 불투명도 */
background-color:rgba(255,255,255,0.5);
margin: 1em auto;
padding: 1em;
}
</style>
</head>
<body>
<div class="main">
안녕하세요. 환영합니다.
</div>
</body>
</html>
실행화면
참고
background : 값 값 값 값; 이런 형식으로 지정할 수 있다.
background-repeat
no-repeat : 반복하지 않는다.
repeat-x : 가로로만 반복한다.
repeat-y : 세로로만 반복한다.
background-attachment
fixed: 고정(스크롤 x)
창 크기를 줄여도 배경이미지가 잘리지 않게 하는 방법
-webkit-background-size : cover;
-moz-background-size : cover;
-o-background-size: cover;
background-size: cover;
'IT > CSS' 카테고리의 다른 글
| [CSS] 리스트 마커 변경하기/list-style-image/list-style-type (0) | 2021.06.09 |
|---|---|
| [CSS] a:link/a:visited/a:hover/a:active (0) | 2021.06.09 |
| [CSS] text속성 (0) | 2021.06.09 |
| [CSS] font 속성 (0) | 2021.06.09 |
| [CSS] CSS정의/style태그 선언 방식/style tag에서 tag 접근 방법 (0) | 2021.06.09 |