javascript - 如何缩放背景图像并使其与浏览器大小一起使用

Question

我想要的是我的 div 中的背景图像会缩放以覆盖整个浏览器。如果图像太小，它会增加，如果它太大，它会变小。我不希望图像重复。

See live demo of my whole web design by clicking here.

我的视差设计中的每个部分都是一个 .它们看起来像这样:

<section id="start" data-type="background" data-speed="10" style="background: url('http://media.vogue.com/files/2013/01/15/storm-troupers-02_191346273703.jpg') 50% 0 repeat fixed; min-h-margin: 0 auto; height: 1080px;">
    bla bla bla     
</section>

样式表

section {
    width: 100%; 
    max-width: 1920px; 
    height: 1080px;
    position: relative; 
    padding-bottom: 40px;
}

还有一个用于视差滚动的 jquery 脚本。这里有一个背景位置的脚本。这可能会影响某些事情。

/**
 * Parallax Scrolling Tutorial
 * For NetTuts+
 *  
 * Author: Mohiuddin Parekh
 *  http://www.mohi.me
 *  @mohiuddinparekh   
 */


$(document).ready(function(){
    // Cache the Window object
    $window = $(window);

   $('section[data-type="background"]').each(function(){
     var $bgobj = $(this); // assigning the object

      $(window).scroll(function() {

        // Scroll the background at var speed
        // the yPos is a negative value because we're scrolling it UP!                              
        var yPos = -($window.scrollTop() / $bgobj.data('speed')); 

        // Put together our final background position
        var coords = '50% '+ yPos + 'px';

        // Move the background
        $bgobj.css({ backgroundPosition: coords });

}); // window scroll Ends

 });    

}); 
/* 
 * Create HTML5 elements for IE's sake
 */

document.createElement("content");
document.createElement("section");

Answer 1

您可以使用 CSS background-size属性(property)。

section {
    background-size: 100%;
}

min-h-margin 不是有效的 CSS 属性。我不确定您将其用于什么目的，或者这是不是打字错误，但我认为值得指出。

您还应注意，此处可能未正确使用 section。来自HTML5 specification :

The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

编辑下面的评论:

...but still when then browser is not in full screen you can see the background repeating.

将 background-repeat: repeat repeat; 替换为 sections :

background-repeat: no-repeat;