6

私は現在、Bootstrap を使用してサイトを設計しており、このサイトのように全高の背景カバー画像を含めようとしています: http://lewisking.net/。

これは私のコードです：

HTML

<header class="title">

<div class="cut">
<img src="" height="">
</div>


<h2>Vintage Boutique Based in New York</h2>

<nav>
<ul>
<li><a href="#portfolio">SHOP</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">PRESS</a></li>
</ul>
</nav>


</header>

CSS

header { 

  background: url(../img/nycfull.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.cut img {
max-width: 100%;
height: auto;
max-height: 100%;
}

ただし、画像が「スクロールせずに見える範囲」セクション全体をカバーするようには見えません。画像は、ヘッダーのテキストと同じ高さになります。私が間違っていることは何ですか？

4

2 に答える 2

1

ナビとヘッダーを一緒にしないでください！ヘッダーを使用して、サイトの最初のセクション (ユーザーがページにアクセスしたときに表示されるもの) を表示します。代わりに、ナビゲーションに位置を追加して、必要な場所に固定します。

全高のカバー画像の CSS コード:

header {
background-image: url(background-img.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
min-height: /*enter value here*/;
}

HTML では、<nav> navbar html here </nav>最初に をコーディングし、次に<header> header html here </header>.

サイトをモバイル対応にコーディングしている場合は、このチュートリアルを読んで、機能するカバー画像の修正を実装してください: CSS background-size: cover – Making it work for mobile / iOS

于 2016-04-18T20:31:18.973 に答える