5

基本的に、私は初めて HTML5 でレスポンシブ サイトを構築しています。とにかく、現時点で立ち往生している問題の 1 つは、バナー セクションを表示するために必要な画像を取得する方法がわからないことです。

これは私が達成しようとしているものです:

ここに画像の説明を入力

しかし、インラインに配置せずに波の画像を表示することはできません。

これまでのhtmlコードは次のとおりです。

<header>
    <h1></h1><!-- Logo -->

        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">HOW IT WORKS</a></li>
                <li><a href="#">OUR CUSTOMERS</a></li>
                <li><a href="#">PRICING</a></li>
                <li><a href="#">PARTNERS</a></li>
            </ul>
        </nav>
</header><!-- End of header -->

<section class="container">
    <h2 class="hidden">Lorem Ipsum</h2>
        <div class="banner">

        </div>

</section><!-- End of slider content -->

そしてここにcssがあります：

.container {
width:auto;
margin: 0 auto;
position:relative;
}

.banner {
background-image: url(../img/banner-lg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

}

誰かが助けになると思う意見があれば、それは本当にありがたいです! css で設定した背景画像が表示されない理由がよくわかりません。スライダーを配置したときは正常に機能しましたが、スライダーを削除して代わりに静止画像を選択するとすぐに表示されなくなりました>

4

3 に答える 3

5

これをhtmlファイルで使用します。

<style type="text/css">
  body{
       background:url("image.jpg");
       background-size: cover;       /* For flexibility */
       }
</style>

注：イメージフォルダではなく、メインフォルダに画像を入れてください。

于 2014-10-18T16:17:13.980 に答える
0

バナー クラスの幅と高さが不足しているように見えるため、折りたたまれている可能性があります。ブラウザの開発者コンソールで確認できますか?

于 2014-10-18T16:39:02.893 に答える