인프런 커뮤니티 질문&답변
작성한 질문수
배경화면을 꽉채우는 방법이 궁금합니다.
22.08.23 20:51 작성
·
297
0
안녕하세요 강사님,
올려주신 소스 파일보고 질문드립니다.
마우스를 움직이니 배경화면으로 쓰인 벽이미지에 공백(아래 캡쳐한 이미지의 검은 색 부분)이 생기는데 본래 사이트 처럼 꽉차게 하고 싶어서요.
방법이 있을까요?
답변 1
0
코딩일레븐
지식공유자
2022. 08. 24. 11:29
안녕하세요
이미지를 꽉 채우는 방법은 여러가지가 있는데요.
우선 배경 이미지를 꽤 크게 준비하시고 css로 꽉 채워주면 됩니다.
.container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: black;
}
.container > img {
position: absolute;
width: 120%; <- 이걸 크게
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}위 처럼 해주시고 moveItem 의 움직임을 작게 설정해주시면 되겠습니다.
css 참고 url -> https://codepen.io/yahao2512/pen/dymLWee
해보시고 안 되시면 다시 질문해주세요~