Question

我正在尝试调整此网站http://www.plusbits.co/的背景图片的大小，以便使用此脚本填充浏览器：

    <script>
    function goToByScroll(id){
        $('html,body').animate({scrollTop: $("."+id).offset().top},'slow');
   }
    $(function()
   {
    $('.slide') .css({'height': (($(window).height()) )});
    $('.content-frame') .css({'height': (($(window).height()) - 63)+'px'});
    $('.content-frame-fifth') .css({'height': (($(window).height()) - 63)+'px'});

    $(window).bind('resize', function(){
        $('.slide') .css({'height': (($(window).height()) )});
        $('.content-frame') .css({'height': (($(window).height()) - 63)+'px'});
        $('.content-frame-fifth') .css({'height': (($(window).height()) - 63)+'px'});
    });
    });

    $('document').ready(function(){
$("div.content-frame").vAlign("div");
    });

    (function ($) {
$.fn.vAlign = function(container) {
    return this.each(function(i){
        if(container == null) {
            container = 'div';
        }
        $(this).html("<" + container + ">" + $(this).html() + "</" + container          + ">");
        var el = $(this).children(container + ":first");
        var elh = $(el).height(); //new element height
        var ph = $(this).height(); //parent height
        var nh = (ph - elh) / 2; //new height to apply
        $(el).css('padding-top', nh);
    });
};
    })(jQuery);
    </script>

以下HTML和CSS：

    <!-- Home Start -->

    <section id="home" class="page">
    <article class=" slide content-frame container">
<div class="row">
    <div class="span12">
        <h1 class="responsive_text">Advertising
        <br />
        <span>Title</span></h1>
        <h3>Description</h3>
        <img id="da" src="images/da.png" a href="#fg" title="Frank & Gary"></a>
    </div>
</div>
    </article>
    </section> 

    <!-- Home End -->




    #home{
    min-height:100px;
    background-image:url(images/uog.jpg);
    background-repeat:no-repeat;
    background-size: 100%;
    margin:auto;
    padding:30px 0px;
    text-align:center;
    }

该网站建立在样板上，但我似乎无法理解为什么背景图像没有正确调整大小。我的HTML有问题吗？或者是CSS？甚至剧本本身？我会感激任何帮助！

Answer 1

首先，如果我是你，我会使用保证金而不是填充

.page {
    margin-top: 57px!important; //height of header
}

并为该部分提供一个绝对高度和背景图像css规则以覆盖该区域

#home {
    margin: 0px auto;
    height: 100%;
    background-size: cover;
}

虽然这应涵盖整个100％的部分。如果那不是你下一个赌注就是强制使用javascript设置这些值。

window.onload = function(){
     document.getElementById("home").style.margin = "0px auto !important";
     document.getElementById("home").style.height = "100% !important";
     document.getElementById("home").style.backgroundSize = "cover !important";
}

希望这对你有用。

尝试使用jQuery调整背景大小

1 个答案: