KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

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

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
부가서비스
KCP 이벤트!
배경이미지 가로가 잘리지 않게 하려면?

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을 통해서 맞추는게 좋을듯 싶습니다.

주소복사
채택됨
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 92,336 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중 포인트경매

  1. 참여39 회 시작20.10.16 07:30 종료20.10.22 19:41
  2. 참여18 회 시작20.10.15 12:15 종료20.10.22 12:15
  3. 참여2 회 시작20.10.14 12:40 종료20.10.21 12:40
  4. 참여2 회 시작20.10.14 12:33 종료20.10.21 12:33

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

© SIRSOFT