배경이미지 가로가 잘리지 않게 하려면?
본문
메인비주얼 이미지를 백그라운드로 사용중인 페이지에서요.
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을 통해서 맞추는게 좋을듯 싶습니다.
답변을 작성하시기 전에 로그인 해주세요.