1

skel.jsとskel-panels.jsを使ってレスポンシブサイトを作ろうとしています。基本的に、これらのライブラリが行うことは、画面サイズのブレークポイントを作成し、画面サイズが変更されたときに非表示のパネルにコンテンツを配置できるようにすることです。

コンテナ div の背景を覆う画像があります。私が抱えている問題は、画面のサイズを変更しようとすると、背景画像に skel-panels.js を介して挿入された新しい要素が「含まれ」ないため、希望よりも小さくなることです。

私のマークアップ:

    <div id="intro">
    <!-- Nav -->
        <div>
            <nav id="nav">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Blog</a>
                <a href="#" class="skel-panels-include" data-action="togglePanel" data-args="bottomPanel">Contact</a>
            </nav>
        </div>
        <div class="container">
        <!-- Header -->


            <div id="header">
                <h1 id="title">Title</h1>
                <img id="logo" src="images/logo.png">
            </div>
            <div>
                <section id="hero"> 
                    <h2>Title</h2>
                    <p>Catchphrase!</p>
                    <a href="#" class="button">Join the Fight</a>
                </section>  
            </div>
        </div>
     </div>

私のCSS：

#intro {
background:url(../images/bg.png) top center no-repeat fixed;
position: relative;
background-size: cover;
text-align: center;
color: #fff;
}

これは次のようになります。

全角 - [1]: http://i.imgur.com/pFpcn3m.jpg

狭い視野 - [2]: http://i.imgur.com/ZIA3nMt.jpg

新しい div が挿入されると、マークアップが台無しになるように見えます (狭いビューのナビゲーション ボタン)。どんな洞察も大歓迎です。

4

1 に答える 1

0

試す

#intro { 
  background: url(../images/bg.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
于 2013-11-12T02:43:41.727 に答える