배경이미지

[CSS] background-size, origin, clip

background의 다양한 속성 중 다음 3가지에 대해 알아보자! background-size background-origin background-size background-size 배경 이미지의 크기를 설정한다. 직접 수치를 입력할 수도 있고, contain 또는 cover 중에 선택할 수도 있다. 속성값 설명 contain 이미지의 비율은 유지하면서, 크기를 가능한한 크게 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 됨. cover 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 됨. (↓background img를 화면에 꽉 차게 설정하는 방법은 아래 게시글 참고↓) 2022.03.25 - ..

[CSS] background img 꽉차게 채우는 법

배경 이미지를 화면에 꽉 차게 채워야 하는 경우가 종종 있다. 원하는 조건은 다음과 같다. 화면에 보이는 전체 페이지를 여백 없이 이미지로 채우기 필요에 따라 이미지 크기 조정 이미지의 중앙 부분 no 스크롤바 여러 방면으로 시도해 본 결과 2가지 방법이 가장 유용했다. 1. 태그 이용하기 html { background: url(img.jpg) no-repeat center fixed; background-size: cover; } 태그는 최소한 브라우저 창의 높이다. backgroun 속성은 background에 관련된 속성 값을 한 번에 적을 수 있다. 순서대로 background-repeat, background-position, background-attchment background-size:..