CSS3에서는 배경 이미지의 사이즈를 조절할 수 있습니다.
5개의 대표 브라우저 모두가 임의의 배경 사이즈를 지원합니다. 그러나 임의의 배경 사이즈는 최근에 제정된 기술이므로 모바일 브라우저는 속성 앞에 브라우저의 특성을 입력해야 지원하는 경우도 있습니다. 브라우저의 특성 입력 방법을 모르신다면 CSS3 가이드북 페이지에서 브라우저의 특성 링크를 클릭하세요.
엘리먼트에다 엘리먼트보다 큰 이미지를 굳이 편집하지 않아도 이미지를 적당한 사이즈로 조절하여 놓을 수 있습니다. 예를 들어서 위의 예제 이미지처럼 엘리먼트보다 큰 이미지가 배경으로 자리잡고 있다고 가정해봅시다.
위와 같은 속성을 적용하면 아래의 이미지처럼 나타납니다.
background-size는 배경 이미지의 사이즈를 조절해주므로 유용하게 사용할 수도 있습니다. 해당 값에는 너비와 높이를 입력하면 되는데 너비만 입력하면 높이는 비율에 따라 자동으로 조절됩니다. 반대로 높이를 기준으로 하고 싶다면 auto 높이를 입력하면 됩니다.
그 외의 값으로 cover와 contain, auto 값이 있는데 cover 값을 입력하면 배경 이미지는 엘리먼트의 너비나 높이에 맞추어 크기가 자동으로 꽉 차게 조절됩니다. contain 값은 이미지의 전체 부분이 보이도록 크기가 자동으로 조절되며 auto는 기본값입니다.
5개의 대표 브라우저 모두가 임의의 배경 사이즈를 지원합니다. 그러나 임의의 배경 사이즈는 최근에 제정된 기술이므로 모바일 브라우저는 속성 앞에 브라우저의 특성을 입력해야 지원하는 경우도 있습니다. 브라우저의 특성 입력 방법을 모르신다면 CSS3 가이드북 페이지에서 브라우저의 특성 링크를 클릭하세요.
엘리먼트에다 엘리먼트보다 큰 이미지를 굳이 편집하지 않아도 이미지를 적당한 사이즈로 조절하여 놓을 수 있습니다. 예를 들어서 위의 예제 이미지처럼 엘리먼트보다 큰 이미지가 배경으로 자리잡고 있다고 가정해봅시다.
.example-div {
width: 698px;
padding: 15px;
padding-top: 312px;
border: 1px solid #CCC;
color: #696969;
background: url(images/tokyo-to.jpg) 50% 15px no-repeat #FFF;
background-size: 500px;
}padding: 15px;
padding-top: 312px;
border: 1px solid #CCC;
color: #696969;
background: url(images/tokyo-to.jpg) 50% 15px no-repeat #FFF;
background-size: 500px;
위와 같은 속성을 적용하면 아래의 이미지처럼 나타납니다.
background-size는 배경 이미지의 사이즈를 조절해주므로 유용하게 사용할 수도 있습니다. 해당 값에는 너비와 높이를 입력하면 되는데 너비만 입력하면 높이는 비율에 따라 자동으로 조절됩니다. 반대로 높이를 기준으로 하고 싶다면 auto 높이를 입력하면 됩니다.
그 외의 값으로 cover와 contain, auto 값이 있는데 cover 값을 입력하면 배경 이미지는 엘리먼트의 너비나 높이에 맞추어 크기가 자동으로 꽉 차게 조절됩니다. contain 값은 이미지의 전체 부분이 보이도록 크기가 자동으로 조절되며 auto는 기본값입니다.
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
evanlee 2014-08-13 02:30:44
0
제가 XE 1.4.5.10 기반으로 사이트를 하나 만들어 보고 있는데요.
초보입니다^^;;
개발 중 문제가 생겼어요. 백그라운드 이미지를 삽입했고 크롬, 익스플로러에서는 백 이미지가 출력이 잘 됩니다.
그런데 아이폰, 아이패드에서 사이트에 접근했을 때 백 이미지가 아예 뜨질 않고 내용만 뜨는데...
어떻게 해결해야하는지 혹시 도움 받을 수 있을까요?
답글달기 삭제