背景不覆盖整页

时间:2017-07-06 16:11:55

标签: html css

当我输入导航栏时,我的背景图片未覆盖整页。我已经将背景宽度和高度设置为100%,我认为这可以解决问题。

https://jsfiddle.net/oefu0rmk/

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>

2 个答案:

答案 0 :(得分:0)

试试这个

   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;
      }

这肯定会奏效。

答案 1 :(得分:0)

您的代码与您的小提琴不匹配。问题是您没有将背景添加到整个页面,而是添加到#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;
}