0

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

点击这里查看我的整个网页设计的现场演示。

我的平行设计中的每个部分都是一个 . 它们看起来像这样：

<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");
4

1 回答 1

2

You can make use of the CSS background-size property.

section {
    background-size: 100%;
}

min-h-margin isn't a valid CSS attribute. I'm not sure what you're using that for, or if that's a typo, but I figured it's worth pointing out.

You should also note that section may not be being used correctly here. From the 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.

Edit from comment below:

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

Replace background-repeat: repeat repeat; on your sections with:

background-repeat: no-repeat;
于 2013-03-17T21:15:28.930 回答