jQuery resize background

var theWindow = $(window),
    $bg = $(".section-main");

function resizeBg() {
    $bg.css("height", theWindow.height() + "px");
}
theWindow.resize(resizeBg).trigger("resize");
<section class="section-main"> </section>
.section-main{
    background: url('/KIDMIA/static/img/home/main.png') no-repeat;
    background-size: cover;
    background-position: center center;
}

COMMENT:

1. jQuery 마지막 줄 : window창이 resize 될 때마다 resizeBg()라는 function을 호출한다.

2. background-size 차이점은 첨부한 그림 참고

-cover
-contain : 안쪽 맞춤 / background image가 짤리는 부분이 없다.

1

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s