본문 바로가기

CSS로 배경 이미지를 높이에 맞게 자동으로 설정하는 방법 (자체 정리용)

2018.09.07 댓글 4

배경 이미지를 설정하는 경우 브라우저 폭에 맞게 너비를 100%, 높이를 auto로 맞추어 추가하는 방법.

.bg_banner_image {
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}
.bg_banner_image::after {
    content: '';
    display:block;
    padding: 15%;
}
// 출처: https://stackoverflow.com/questions/40520604/set-background-image-width-100-height-auto

또 다른 방법.

#sample-id {
  background: url(../images/sample.jpg) #202020 no-repeat;
  background-size: cover;
  max-height: 100%;
  max-width: 100%;
}
// 출처: https://foundation.zurb.com/forum/posts/14515-how-to-scale-background-image-accrd-to-width-of-the-browser

워드프레스에서는 페이지 빌더를 사용하면 매우 편리하게 콘텐츠를 브라우저 폭에 맞게 추가할 수 있다.

참고할 만한 사이트:

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글4