브라우저 사이즈만큼 이미지 늘어나게 만들기

브라우저의 다큐먼트 사이즈만큼 이미지를 늘어나게 만들 수 있습니다.

어떠한 해상도에도 대응이 되니까

은은하게 배경으로 깔아주면 효과가 아주 좋겠죠.

다음 코드를 실행시켜 봅시다.

<!doctype html>

<head>

<title>이미지화면크기로 늘어남</title>

body{margin:0px;}

/* 배경 스타일 */

#bg{position:absolute; top:0px; width:100%; height:100%; background-size:100%; z-index:-1;}

</style>

</head>

<body>

</body>

</html>

200X200사이즈의 이미지를 불러왔는데 브라우저를 잡아당기면 아래 그림처럼 비율에 상관없이 화면에 꽉차는 것을 볼 수 있습니다.

웹마케팅 창고