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

CSSbackground-sizeプロパティを使用できます。

section {
    background-size: 100%;
}

min-h-marginは有効な CSS 属性ではありません。あなたがそれを何に使用しているのか、それともタイプミスなのかはわかりませんが、指摘する価値があると思いました.

sectionまた、ここでは正しく使用されていない可能性があることに注意してください。HTML5仕様から：

section 要素は、一般的なコンテナー要素ではありません。要素がスタイリング目的またはスクリプト作成の便宜のためにのみ必要な場合、作成者は代わりに div 要素を使用することをお勧めします。

以下のコメントから編集します。

...しかし、ブラウザが全画面表示になっていない場合でも、背景が繰り返されるのを見ることができます。

を次のように置き換えbackground-repeat: repeat repeat;ますsections。

background-repeat: no-repeat;
于 2013-03-17T21:15:28.930 に答える