답변 3개
다음과 같이 해볼 수 있을것 같습니다.
방법1.
/* CSS */
.parent-div {
width: 1280px;
height: 500px; /* 이미지의 높이에 맞게 조절해주세요 */
background-image: url("배경이미지_파일_경로.png"), url("원하는이미지_파일_경로.png");
background-repeat: no-repeat;
background-position: left top, right top;
background-size: contain;
}이렇게 하면 이미지 뒤에 2460px의 백그라운드를 보이게 할 수 있으며, 이미지의 비율을 유지하면서 이미지를 최대한 확대하여 표시 할 수 있습니다.
방법2.
/* CSS */
.parent-div {
width: 1280px;
height: 500px; /* 이미지의 높이에 맞게 조절해주세요 */
background-image: url("배경이미지_파일_경로.png"), url("원하는이미지_파일_경로.png");
background-repeat: no-repeat;
background-position: left top, right top;
background-size: contain;
}이렇게 하면 이미지를 부모 요소에 맞추되, 이미지의 비율을 유지하지 않고 잘라내어 배치하며, 이미지 뒤에 2460px의 백그라운드를 보이게 할 수 있고, 이미지를 최대한 확대하여 표시합니다
위의 방법중 테스트 해보시고 원하시는 방법으로 해결 될 수 있을 것 같습니다.
이 이외에도 방법은 다양할 수 있습니다.
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
백그라운드로 넣으려면 리소스 감당을 어찌 하시려 하시나요...
2460px 의 백그라운드 이미지 렌더링.. 생각만해도 아찔하네요..
부모의 크기가 1280px 이면 국민해상도 1920 기준으로 양 옆에 날개를 붙이세요.
인벤처럼.
그리고 @media 쓰셔서 모바일도 분기 해주시구요
지금 생각하시는 방법은 절대로 권장하는 방법이 아닙니다..
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인