[반응형 웹 개발 팁] Fullscreen backgrounds with centered content

반응형 웹 제작시, 화면사이즈별로 페이지내 삽입된 이미지가 무조건 가운데 정렬되게끔 동작되게 하는 방법이다.

HTML, CSS 및 jQuery 코드의 추가가 필요하다.

(하단의 출처 http://www.minimit.com/articles/solutions-tutorials/fullscreen-backgrounds-with-centered-content 링크는 추가로 오버랩되는 텍스트가 있지만 여기서는 텍스트 제외 이미지만 하기로...)

HTML 섹션

<div class="background" style="background-image:url('이미지경로');border:0px;width:100%;height:301px;" data-img-width="1920" data-img-height="301" align="center"></div>

CSS 섹션

/* background setup */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%9 !important;
}

jQuery 섹션 (직접 적용해보았을때는 js에러가 나서 CSS부분만 남겨두었는데 잘 동작하였다. )

/* resize background images */function backgroundResize(){    var windowH = $(window).height();    $(".background-map").each(function(i){        var path = $(this);        // variables        var contW = path.width();        var contH = path.height();        var imgW = path.attr("data-img-width");        var imgH = path.attr("data-img-height");        var ratio = imgW / imgH;        // overflowing difference        var diff = parseFloat(path.attr("data-diff"));        diff = diff ? diff : 0;        // remaining height to have fullscreen image only on parallax        var remainingH = 0;        if(path.hasClass("parallax")){            var maxH = contH > windowH ? contH : windowH;            remainingH = windowH - contH;        }        // set img values depending on cont        imgH = contH + remainingH + diff;        imgW = imgH * ratio;        // fix when too large        if(contW > imgW){            imgW = contW;            imgH = imgW / ratio;        }        //        path.data("resized-imgW", imgW);        path.data("resized-imgH", imgH);        path.css("background-size", imgW + "px " + imgH + "px");    });}backgroundResize();

* 출처 : http://www.minimit.com/articles/solutions-tutorials/fullscreen-backgrounds-with-centered-content