ZungTa Blog

퍼블리싱 작업 중 배경 이미지를 넣어야 할 경우 반응형으로 맞춰야 하기 때문에 곤란한 경우가 있다. 어느 해상도에서나 특정 모양을 맞춰줘야 한다. 예를들어 아래 이미지를 해상도가 바뀌어도 일정하게 꽃모양을 비춰줘야 한다던지 하는 문제가 있다. 일단 repeat은 no-repeat으로 설정해주는게 당연하고, 화면에 다 보여줘야 하니까 background-size는 contain을 해준다. 그렇게 되면 여백이 생기거나 이미지가 잘리는 문제가 있다. 그래서 한가지 노하우를 공유하고자 한다. 위의 사진의 경우 꽃모양을 일정하게 보여주고 싶을 경우 사진의 하단쪽을 계속 보여줘야한다. 그럼 background-size: cover; 를 주고 중요한 것은 background-position을 주는 것이다.