웹프로그래밍

Global It Leader!!


CSS


 
 

윈도우 크기에 따라 배경 이미지 크기 변경하기

페이지 정보

작성자 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 2,604회 작성일 20-10-22 21:42

본문

<style>
body {
background-color: #A9A5A6; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; height:100%; } #background_div {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
text-align:center;
}

#content {
position:relative;
z-index:100;
padding:10px;
width:300px;
text-align:center;
border:1px solid red;

} </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
window.onload=function(){
 $("#background_img").height($(window).height());
 $("#background_div").width($(window).width());
 $("#background_div").height($(window).height());
 var window_width = $(window).width() - $("#content").width();
 var w = (window_width/2);
 $("#content").css("margin-left", w);
}
$(window).resize(function() {
 $("#background_img").height($(window).height());
 $("#background_div").width($(window).width());
 $("#background_div").height($(window).height());
 var window_width = $(window).width() - $("#content").width();
 var w = (window_width/2);
 $("#content").css("margin-left", w);
});
</script>

<div id="content">내용 작성하는 곳</div> <did="background_div">  <img src="배경으로 쓸 이미지" id="background_img"> <div>


창 크기를 늘리면 창 크기에 따라 배경 이미지 크기가 변경된다.

배경 이미지가 가로가 작은 사이즈의 이미지라, 세로 크기만 맞춰서 동작하도록 설정

대충 읽어보면 필요할만한데 편집해서 쓸 수 있을것이라 생각됨

댓글목록

등록된 댓글이 없습니다.

전체 72
게시물 검색
CSS 목록
번호 제목 글쓴이 조회 날짜
72 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 314 07-31
71 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 502 04-09
70 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 831 09-01
69 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1614 04-24
68 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2743 04-24
67 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1166 03-28
66 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2476 03-26
65 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1165 03-26
64 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1165 03-25
63 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1198 03-18
62 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 7518 11-28
61 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1622 09-20
60 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1785 08-23
59 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2064 06-07
58 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2498 05-20
57 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2323 04-08
56 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2731 02-03
55 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2317 12-19
54 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2445 11-02
53 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2518 10-25