백그라운드 풀스크린 이미지 적용하기 > 디자이너팁

디자이너팁

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

백그라운드 풀스크린 이미지 적용하기 정보

백그라운드 풀스크린 이미지 적용하기

본문

<!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> 

추천
1

댓글 0개

전체 360
디자이너팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT