배경이미지 가로가 잘리지 않게 하려면?

배경이미지 가로가 잘리지 않게 하려면?

QA

배경이미지 가로가 잘리지 않게 하려면?

본문

메인비주얼 이미지를 백그라운드로 사용중인 페이지에서요.

PC에서는 메인비주얼 이미지가 잘 보이는데, 

모바일에서 메인이미지 (백그라운드 이미지)가 보일때 가로가 잘리는 현상이 있네요.

백그라운드 가로가 잘리지 않고 모두 표시되게 하려면 어떻게 지정해 줘야 할까요?

 

메인비주얼 부분의 CSS는 아래와 같습니다.

 

.main-visual .item .img {position:relative; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; overflow:hidden;}

 

도움 부탁 드려요.

이 질문에 댓글 쓰기 :

답변 1

PC 크기에 맞춘 백그라운드 이미지를 모바일에서도 안짤리게 보이게 맞추기 어려우실것 같습니다.

미디어 태그를 통해서 background-position을 통해서 위치를 맞춰주시거나, 크기 상관 없다면 background-size: contain;로 놔야겠지만 안될듯 싶구요.

모바일용 백그라운드 이미지를 만들어서 불러오던가, 백그라운드 이미지를 쓰시지 마시고 img 태그로 불러와서 width, height, object-fit, object-position을 통해서 맞추는게 좋을듯 싶습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT