백그라운드 풀스크린 이미지 적용하기
<!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>
게시판 목록
디자이너팁
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 372 |
선택과집중
|
4개월 전 | 238 | |
| 371 |
선택과집중
|
4개월 전 | 266 | |
| 370 |
선택과집중
|
4개월 전 | 347 | |
| 369 |
선택과집중
|
4개월 전 | 324 | |
| 368 |
선택과집중
|
5개월 전 | 369 | |
| 367 |
nekoieye
|
5개월 전 | 413 | |
| 366 |
선택과집중
|
5개월 전 | 304 | |
| 365 |
선택과집중
|
5개월 전 | 355 | |
| 364 |
선택과집중
|
6개월 전 | 394 | |
| 363 | 10개월 전 | 1075 | ||
| 362 | 11개월 전 | 780 | ||
| 361 | 1년 전 | 1231 | ||
| 360 | 2년 전 | 5144 | ||
| 359 |
별지기천사
|
3년 전 | 3559 | |
| 358 |
 ChristinaWei |
3년 전 | 2631 | |
| 357 | 3년 전 | 2827 | ||
| 356 | 3년 전 | 2384 | ||
| 355 |
네이비블루
|
3년 전 | 2584 | |
| 354 |
네이비블루
|
3년 전 | 2157 | |
| 353 |
웹플레이스
|
3년 전 | 3363 | |
| 352 | 4년 전 | 4540 | ||
| 351 |
 그누그누오 |
4년 전 | 4183 | |
| 350 | 4년 전 | 17293 | ||
| 349 | 4년 전 | 4813 | ||
| 348 | 4년 전 | 4051 | ||
| 347 | 4년 전 | 2539 | ||
| 346 | 4년 전 | 3643 | ||
| 345 | 4년 전 | 3446 | ||
| 344 | 4년 전 | 3334 | ||
| 343 |
루돌프사슴코
|
4년 전 | 2503 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기