html에서 배경 이미지 컨트롤하기

퍼블리싱 작업 중 배경 이미지를 넣어야 할 경우 반응형으로 맞춰야 하기 때문에 곤란한 경우가 있다.

어느 해상도에서나 특정 모양을 맞춰줘야 한다.

예를들어 아래 이미지를 해상도가 바뀌어도 일정하게 꽃모양을 비춰줘야 한다던지 하는 문제가 있다.

출처: unsplash.com

 

일단 repeat은 no-repeat으로 설정해주는게 당연하고, 화면에 다 보여줘야 하니까 background-size는 contain을 해준다.
그렇게 되면 여백이 생기거나 이미지가 잘리는 문제가 있다.

 

 

 

그래서 한가지 노하우를 공유하고자 한다.

위의 사진의 경우 꽃모양을 일정하게 보여주고 싶을 경우

사진의 하단쪽을 계속 보여줘야한다.

그럼 background-size: cover; 를 주고
중요한 것은 background-position을 주는 것이다.