当我输入导航栏时,我的背景图片未覆盖整页。我已经将背景宽度和高度设置为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>
答案 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;
}