如何缩放背景图片并使其适用于浏览器尺寸

我想要的是我的div中的背景图片将会缩放以覆盖整个浏览器。如果图像太小，它会增加，如果太大，它会变小。我不希望图像重复。如何缩放背景图片并使其适用于浏览器尺寸

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

在我parallex设计中的每个部分是一个。他们是这样的：

<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; 
}

还有为parallex滚动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");

来源

2013-03-17 Vemund Eldegard

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

section { 
    background-size: 100%; 
}

min-h-margin不是有效的CSS属性。我不确定你使用的是什么，或者如果这是一个错字，但我认为值得指出。

您还应该注意section在这里可能没有被正确使用。来自HTML5 specification：

section元素不是一个通用的容器元素。当仅仅为了样式或为了方便脚本而需要元素时，鼓励作者改为使用div元素。

编辑从下面的评论：

...但还是在随后的浏览器是不是在全屏幕，你可以看到背景重复。

更换background-repeat: repeat repeat;您sections有：

background-repeat: no-repeat;

来源

2013-03-17 21:15:28

好吧。这些属性被添加，但仍然当浏览器不是客栈全屏（我使用Safari），你可以看到背景重复。并在第四和第五节的背景完全搞砸了@JamesDonnelly – 2013-03-17 21:20:57

我已经添加了一些关于'background-repeat'给我的答案。 :-) – 2013-03-17 21:23:02

也许考虑'background-size：cover;'？ “封面”会将其放大，以便背景始终完全覆盖图像，因此不会重复。不过，不知道这将如何与JavaScript视差相互作用。 – 2013-03-17 21:30:08

如何缩放背景图片并使其适用于浏览器尺寸

回答

相关问题