인터넷에 검색하면 배경에 이미지의 특정 부분을 포지션으로 지정하는 방법은 많이 나오지만
포지션을 지정하면서 동시에 퍼센트로 지정해서 크기가 달라져도 배경 이미지도 유동적으로 같이 크기가 변하게 하는 방법은 찾기가 힘들었다.
그래서 소개해보려고 한다.
아래 이미지를 보자.
위의 이미지를 표현한 이미지, 스타일시트, HTML 코드는 아래와 같다.
<style type="text/css" media="screen">
#movie-playerA {
width: 20%;
}
#movie-playerB {
width: 15%;
}
#movie-playerC {
width: 10%;
}
#movie-player-wrapper {
position: relative;
background: url(https://1.bp.blogspot.com/-XFS5HXQzWXM/XQx7kJswf1I/AAAAAAABFZo/X4O0QcUo5ucuXR3U4sTzFrwKyANIZzGYACLcBGAs/s1600/w01.jpg);
background-size: 1100% 1100%;
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: 70%;
background-position:0% 10%;
}
</style>
<div id="movie-playerA">
<div id="movie-player-wrapper"></div>
</div>
<div id="movie-playerB">
<div id="movie-player-wrapper"></div>
</div>
<div id="movie-playerC">
<div id="movie-player-wrapper"></div>
</div>
간단하게 말해서 이미지 중에서 가로로 첫번째 줄(0%), 세로로 두번째 줄(10%)의 이미지를 보여준다.
픽셀(px)이 아닌 퍼센트(%)로 영역을 잡아서 사각형의 크기가 달라지면 이미지의 크기도 유동적으로 같이 달라진다.
html, css에 대해서 어느정도 안다면 쉽게 파악이 가능할 것이다.
특이한 점 한가지는 나눠서 정확하게 딱 떨어지는 수에 1을 더해준 개수여야 한다는 것이다.
이미지의 개수를 보면 가로로 11개 세로로 11개다.
(나도 처음에는 가로로 10개 세로로 10개로 했었는데 두번째부터 조금씩 어긋나기 시작하더라.)
예를 들자면
가로 세줄, 세로 세줄의 이미지가 있다고 치면 “background-size”는 300%가 되고
그것을 보여주는 “background-position”은 순서대로
0% 0%, 50% 0, 100% 0,
0% 50%, 50% 50%, 100% 50%,
0% 100%, 50% 100%, 100% 100%
이런식으로 9개를 표현한다.
참고로 박스의 비율을 계속 유지하는 방법은 가로세로 비율을 유지하는 반응형 박스에서 참고했다.
