background image 속성
<body>
<div class="main-background"></div>
</body>.main-background {
width: 100%;
height: 500px;
background-image: url(../img/shoes.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}- css background-image 속성을 통해 div에 background image를 삽입할 수 있다
- background-size 는 크기 직접 입력, cover, contain 옵션 등을 선택할 수 있다
- (참고) cover > div 크기에 꽉 차도록 이미지를 크롭, contain > 이미지가 다 보이도록 div 여백을 남김 - background-repeat: no-repeat > 기본적으로는 background image가 div보다 작은 곳은 이미지를 반복해서 보여주므로, 이미지 반복을 막으려면 no-repeat 속성을 적용해야 한다
- background-position 은 브라우저 크기 조절 시 이미지 사이즈가 유동적으로 바뀔 때 이미지의 어느 위치를 기점으로 조절할 지 선택하는 속성이다 > center일 경우 브라우저 사이즈를 바꿔도 이미지 중심이 계속 유지된다
- filter 속성을 이용해 이미지 보정도 가능하지만, 속성을 적용한 개체의 모든 자식 개체에 같은 효과가 적용되므로 주의해야 한다
- filter: brightness(0.5)
eunji yang