你有一些问题。首先,您已经创建了两次头部部分,一次在身体部分内。保持头部在一起,有一个头部和一个身体部分。多次打开和关闭这些部分会导致问题。
至于背景图像,在图像前面有一个分号
no-repeat
(etc),在你的who/what/where css中;如果你去掉这个分号,它就会起作用。
你的css中还有另外两个小问题;它是
text-align
不
align-text
,同时替换
object-border
border
编辑:你的主要问题是
background-image:
那里应该有
background:
在css中(因为您在那里拥有所有信息,而不仅仅是图像url)。我还从小图像中删除了背景大小:cover,因为这些图像会覆盖设置为cover的主背景图像。您的大背景图像在url括号中的文件路径周围没有倒逗号。此外,您的横幅图像是一个id,而不是最初在HTML中调用的类。
我创建了一个代码段,因此如果您运行它,您可以看到输出。
body {
font-family: 'Open Sans Condensed', sans-serif;
color: white;
margin: 0;
padding: 0;
}
h1 {
padding: 0;
margin-top: -1%;
text-align: center;
color: black;
font-size: 6.5vw;
}
p {
font-family: 'EB Garamond', serif;
font-size: 2.5vw;
}
header {
height: 70px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 2px;
z-index: 66666;
}
.navbar-nav {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
.navbar-brand {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
/* MASTHEAD */
#masthead {
position: relative;
}
.custom-header {
display: block;
height: auto;
}
#mast-img {
max-width: 100%;
display: block;
height: auto;
position: fixed;
}
#brand {
z-index: 100;
position: absolute;
color: white;
font-size: 40px;
font-weight: bold;
line-height: 50px;
left: 150px;
top: 325px;
}
#masthead .wrap {
position: relative;
}
#topMenu {
z-index: 1;
}
/* END MASTHEAD */
#page {
position: relative;
}
#bannerimage {
width: 100%;
height: 405px;
background-image: url('https://static.pexels.com/photos/486895/pexels-photo-486895.jpeg');
background-repeat:no-repeat;
background-position: center center
background-size:cover;
}
.bannerWrapper {
width: 94%;
max-width: 960px;
margin: 0px auto;
}
.btn:hover {
color: #FEEE8B;
}
.btn:active {
color: white;
}
.btn {
text-align: center;
/*not align-text*/
margin-bottom: 3%;
margin-right: 5px;
margin-left: 5px;
border-radius: 0 !important;
font-size: 1.5vw;
color: white;
}
article {
padding-bottom: 10px;
}
.block {
background-color: rgba(157, 178, 197, .6);
opacity: 1;
padding: 1em;
width: 50%;
height: 12%;
margin-right: auto;
margin-left: auto;
margin-top: 10%;
border: 10px;
}
.portblock {
text-align: right;
padding: 1em;
background-color: rgba(157, 178, 197, .6);
opacity: 1;
width: 50%;
height: 12%;
margin-top: 10%;
margin-right: 1%;
margin-left: auto;
border: 10px;
/*it's just border, not object-border*/
}
.portrait {
width: 40%;
height: auto;
border-radius: 50%;
margin-bottom: 3%;
margin-top: 3%;
opacity: .9;
}
.img-thumbnail {
background: rgba(157, 178, 197, .6);
margin-top: 8%;
padding: 1em;
margin-right: 1%;
margin-left: 1%;
}
#who {
background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1422394882588-508654c3f5d4.jpeg") no-repeat center center fixed;
/*the reason why the bg-image wasn't working was you had a semi-colon before no-repeat*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/*background-size: cover;*/
height: 800px;
padding: 1px;
}
#what {
background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/*background-size: cover;*/
height: 800px;
padding: 1px;
}
#where {
background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/*background-size: cover;*/
height: 800px;
padding: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<title>Teo Hannum | Teacher of the Alexander Technique</title>
<!-- MASTHEAD -->
<body>
<!-- data-spy="scroll" data-target=".navbar" data-offset="0"> -->
<div id="page">
<header role="banner">
<!-- NAVBAR -->
<nav id="mainnavbar" class="navbar navbar-default navbar-fixed-top" roll="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">Teo Hannum | Teacher of the Alexander Technique</a>
</div>
<ul class="nav navbar-nav navbar-right" id="topMenu">
<li class="active">
<a href="#who">Who</a>
</li>
<li>
<a href="#what">What</a>
</li>
<li>
<a href="#where">Where</a>
</li>
</ul>
</div>
</nav>
<div id="brand">
<p>Move with Fluidity and Intention</p>
</div>
</header>
<div id="bannerimage">
<div class="bannerWrapper">
<div class="bannerText">
<p>Move with Fluidity and Intention</p>
</div>
</div>
</div>
<!-- WHO SECTION -->
<div id="who">
</div>
<!-- WHAT SECTION -->
<div id="what">
<article>
<div class="portblock">
<h1>Portfolio</h1>
<p>Utilizing the "less is more" mindset, I create focused content that delivers results while developing brand culture and identity.</div>
</article>
<div class="container-fluid img-thumbnail">
<div class="row">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1081">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1067">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1044">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1012">
</div>
</div>
</div>
</div>
<div id="where">
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src="js/index.js"></script>
