<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>제목</title>
<style>
* { margin: 0; padding: 0; }
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#page-wrap { position: relative; width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
</script>
</head>
<body>
<img src="/data/201107/IJ13098874706702/bg.jpg" id="bg" alt="">
<div id="page-wrap">
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
<p>샘플 텍스트</p>
</div>
</body>
</html>
게시글 목록
| 번호 | 제목 |
|---|---|
| 1524 | |
| 1523 | |
| 1522 | |
| 1521 | |
| 1520 | |
| 1519 | |
| 1517 | |
| 1516 | |
| 1514 | |
| 1506 | |
| 1501 | |
| 1495 | |
| 1466 | |
| 1447 | |
| 1444 | |
| 1443 | |
| 1440 | |
| 1436 | |
| 1435 | |
| 1431 | |
| 1403 | |
| 1394 | |
| 1388 | |
| 1387 | |
| 1386 | |
| 1380 | |
| 1378 | |
| 1373 | |
| 1370 | |
| 1357 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기