背景未覆盖整页

当我输入我的导航栏时，我的背景图像没有覆盖整个页面。我已将背景宽度和高度设置为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

是否更换主背景覆盖属性的“650像素”与“盖”不行？我无法在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

背景未覆盖整页

回答

相关问题