1. background-image
2. background-repeat
배경이미지의 반복 지정
설정된 이미지 크기 화면보다 작으면 자동으로 반복 출력 - 기본값이 repeat 이기 때문
x로만 반복
background-repeat: repeat-x;
y로만 반복
background-repeat: repeat-y;
반복 출력 멈추고 싶은 경우
background-repeat: no-repeat;
복수개의 이미지 설정 시 먼저 설정된 이미지가 전면에 출력됨
body{
background-repeat: no-repeat, repeat;
}
3. background-size 프로퍼티
배경 이미지 사이즈 지정
첫번째 값 w, 두번째값 h/하나만 지정 시 w, h는 auto
- px 값 지정
- %값 지정 : 화면 줄이거나 늘리면 배경이미지의 크기도 따라서 변화
background-size: 100% 100%;
- cover 지정 : 이미지 크기 비율 유지한 상태에서 부모요소의 w/h 중 큰 값에 배경 이미지 맞춤
- contain 지정 : 크기 비율 유지 상태에서 보이지 않는 부분 없이 전체가 들어갈 수 있도록 조정
background-size: contain;
4. background-attachment
일반적으로 화면 스크롤 시 배경 이미지도 함께 스크롤, 스크롤 되더라도 배경이미지 고정 원하면 background-attachment에 fixed 키워드 지정
<head>
<style>
*, *:after, *:before{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
}
.bg-wrap{
/*page-wrap보다 bg-wrap 작은 경우, page-wrap이 가리는 문제를 해결*/
min-height: 600px;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: auto;
}
.parallax{
/* parallax scrolling effect */
background-attachment: fixed;
}
.normal{
}
#page-wrap{
width:400px;
margin: 50px auto;
padding: 30px;
background: white;
box-shadow: 0 0 20px black;
font: 15px/2 Georgia, Serif;
}
</style>
</head>
<body>
<div class="bg-wrap parallax">
<div id="page-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsum maxime libero, impedit necessitatibus quas blanditiis tenetur vero aut esse unde ab similique, delectus placeat enim quae expedita excepturi laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsum maxime libero, impedit necessitatibus quas blanditiis tenetur vero aut esse unde ab similique, delectus placeat enim quae expedita excepturi laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsum maxime libero, impedit necessitatibus quas blanditiis tenetur vero aut esse unde ab similique, delectus placeat enim quae expedita excepturi laboriosam.</p>
</div>
</div>
<div class="bg-wrap normal"></div>
</body>
5. background-position
일반적으로 배경 이미지 좌상단부터 이미지 출력
background-position 사용>xpos, ypos 지정 가능
기본값은 0% 0%
background-position: top;
top, botton, center, left, right
25% 75%
10px 20px (x,y)
2개 적용시 0px 0px, center
6. background-color
색상 지정
7. background shorthand
background-color, background-image, background-repeat, background-position 한번에 저의
background : color image repeat attachment position
