背景が全ページをカバーしていない

ナビゲーションバーを入力すると、背景画像が全ページをカバーしていません。私は背景の幅と高さを100％に設定しました。これは問題を解決すると思っていました。背景が全ページをカバーしていない

CSS

#intro { 
    background: #151515 url(../img/b1.jpg) no-repeat center bottom; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: 650px; 
    background-attachment: fixed; 
    width: 100%; 
    height: 100%; 
    min-height: 720px; 
    display: table; 
    position: relative; 
    text-align: center; 
} 

.intro-overlay{ 
    position:absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: #111111; 
    opacity: .85 
}

HTML

<nav> 
    <a href="#about">about me</a> 
    <a href="#my parents">about my parents</a> 
    <a href="#hobbies">My hobbies</a> 
    </nav> 

<body> 


    <section id="intro"> 
     <div class="intro-overlay"></div> 
      <div class="intro-content"> 
       <h5>Oh, hi there! My name is Tatsu</h5> 
       <h1> (Tah-T-Su)</h1> 
       <a class="button stroke smoothscroll" href="#about" title="about me button">find out more about me</a> 
</div>

出典

2017-07-06 Rorix

は動作しません「カバー」との主な背景カバー属性の「650px」を交換していますか？私は検証するためにJSFiddleに何か入力することができません。 '＃intro' div idには –

があります。 'position：relative;'を 'position：absolute;'に変更します。 – Jorden1337

この

html { 
      background: url(xyz.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
     } 
    body 
     { 
     background:none; 
     }

をお試しください

これは間違いなく機能します。

出典

2017-07-06 16:28:14

あなたのコードはあなたのフィドルと一致しません。問題は、ページ全体に背景を追加するのではなく、#intro要素に追加することです。この<section>以外のコピーがあります。

あなたのフィドルにこれを追加し、それは完全なページに拡張します：

body { 
    background: #151515 url(../img/b1.jpg) no-repeat center bottom; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: 650px; 
    background-attachment: fixed; 
}

出典

2017-07-06 19:06:06 rideron89

背景が全ページをカバーしていない

答えて

関連する問題