Trying to do my first solo project after spending over a year learning, and feeling like I've learned nothing.
For some reason, creating a banner is proving extremely difficult.
At first, I wanted to tag my nav-bar to the bottom of my banner. I gave up on that, and am now just trying to get my banner to work in the most basic of ways.
If I put the image inline with HTML, it stays at the forefront of everything and scrolls with the page. No bueno. background-image is not working at all.
I want it to stay at the top of the page. I want the navbar to stay at the top of the user's visible area (so, it scrolls with the page).
I've spent three hours on this!
Here's my code:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Teo Hannum | Teacher of the Alexander Technique</title>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.0.0/bootstrap-social.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/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>
</head>
<!-- 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 class="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.
</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>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</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%;
background-image: url(https://static.pexels.com/photos/486895/pexels-photo-486895.jpeg);
height: 405px;
background-color: purple;
background-position: center;
}
.bannerWrapper {
width: 94%;
max-width: 960px;
margin: 0px auto;
}
.btn:hover{
color:#FEEE8B;
}
.btn:active{
color:white;
}
.btn{
align-text: center;
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%;
object-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;
object-border:10px;
}
.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-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1422394882588-508654c3f5d4.jpeg?X-Amz-Date=20161019T232852Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=3b5a5267c478a5ea16ade4496e34221342748dbda8813840fa9867fe3270b6f7&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D");
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
#what{
background-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg?X-Amz-Date=20161019T232942Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=2c6a81a324d7a3ae6587b00c8cfba95f6620b9ec47222caa643963bfbae97b76&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D");
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-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg?X-Amz-Date=20161019T232942Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=2c6a81a324d7a3ae6587b00c8cfba95f6620b9ec47222caa643963bfbae97b76&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D");
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
Please note that I copy-pasted most of the CSS from another project, so there's a lot of yet-to-be-used stuff in here.
You have a few issues here. First , you have created a head section twice, once within the body section. Keep the head together, have one head section and one body section. Opening and closing these sections off more than once will cause problems.
As for the background image, you have a semi-colon before your no-repeat (etc), in your who/what/where css; if your remove this semi colon, it works.
You also have 2 other minor issues in your css; it's text-align not align-text, also replace object-border with just border
EDIT: Your main issue was that you had background-image: where there should have been just background: in the css (because you had all the information there and not just the image url). Also I removed the background-size:cover from the small images, as these would have covered the main background image that was set to cover. Your big background image had no inverted commas around the filepath in the url brackets. Also your banner-image is an id, not a class as it was originally being called in the HTML.
I created a snippet, so if you run it you can see the output.
Hope this helps.
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>