My Hero Image is not centered on Mobile - html

I am trying to create a full container image that is centered nicely on all screens.
<body>
<!-- Preloader -->
<div class="page-loader">
<div class="loader">Loading...</div>
</div>
<!-- Navigation start -->
<nav class="navbar navbar-custom navbar-transparent navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#custom-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="assets/images/kerriwalshjenningswhite.png" alt="Kerri Walsh">
</a>
</div>
<div class="collapse navbar-collapse" id="custom-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Home
</li>
<li class="dropdown">
Gallery
</li>
<li class="dropdown">
Sponsors
</li>
<li class="dropdown">
Bio
</li>
<li class="dropdown">
Contact
</li>
</div>
</div>
</nav>
<!-- Navigation end -->
<!-- Home start -->
<section id="home" class="home-section home-parallax home-fade kenburns home-full-height">
<div class="hero-slider">
<ul class="slides">
<li class="bg-light-30">
<div class="img">
<img src="assets/images/kerribig4.jpg" />
</div>
<div class="hs-caption">
<div class="caption-content">
<p class="hs-title-size-1 font-serif mb-30">
Hello & welcome
</p>
<h1 class="hs-title-size-5 font-alt mb-40">
I am Kerri Walsh
</h1>
Learn More
</div>
</div>
</li>
<li class="bg-light">
<div class="img">
<img src="assets/images/kerribig3.jpg" />
</div>
<div class="hs-caption">
<div class="caption-content">
<p class="hs-title-size-1 font-serif mb-30">
I am
</p>
<h1 class="hs-title-size-5 font-alt mb-40">
A Mother
</h1>
Learn More
</div>
</div>
</li>
<li class="bg-light">
<div class="img">
<img src="assets/images/kerribig2.jpg" />
</div>
<div class="hs-caption">
<div class="caption-content">
<p class="hs-title-size-1 font-serif mb-30">
I am
</p>
<h1 class="hs-title-size-5 font-alt mb-40">
An Olympian
</h1>
Learn More
</div>
</div>
</li>
</ul>
</div>
</section >
<!-- Home end -->
And then here is the first part of my style.css. I need to make this image appear a in the center of the screen on mobile so you can actually see Kerri Walsh
html {
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: scrollbar;
}
body {
background: #fff;
font: 400 13px/1.8 "Lato", sans-serif;
color: #666;
-webkit-font-smoothing: antialiased;
}
img {
/*width: 100%; */
height: 100%;
}

If you want this to be a background image, which I think you want.
Then you can use this method:
.home-section {
/* Location of the image */
background-image: url(images/background-photo.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
It's responsive and will look good on all screens. And yes, you can ofcourse change the background images using jQuery or native JavaScript just like you've done with the images.
Best regards,

Related

Correct Image Size for Jumbotron

I am using a jumbotron container in bootstrap and trying to use an image as the background. However, it seems like all images distort as the screen size changes or don't display the correct part of the photo. Is there a correct size I should set save my image in? Or a way to get rid of/minimize distortion on screen resize? I can show you my code if necessary.
Thanks in advance!
CSS:
*{
margin: 0;
padding: 0;
}
.navbar-default{
background-color: rgb(66, 134, 244);
}
.under {
border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
width: 300px;
}
.jumbotron{
height: 400px;
background: url("../images/parakeet.jpg");
background-size: cover;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- Button nav for small screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand name -->
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<!-- Makes nav not expand on resize -->
<div class="collapse navbar-collapse" id="myNavbar">
<!-- Menu -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- Dropdown menu -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!-- Non dropdown -->
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center under">
<h1>Website Heading</h1>
<p>Information about the website!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-leaf size"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass btn-lg"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus btn-lg"></span>
</div>
</div>
</div>
</body>
</html>
That is perfectly fine. Now you need to play with background-position
Now if you run this code. You will see an image with some cute dogs. Now on smaller devices you will see the 3 middle dogs. Why? because the background-position is set to 50% on x and 50% on y (The center of the image)
Let's say that on mobiles you want to show the right most puppy with the black head. That is simple you just set background-position to 100% and 50%.
*{
margin: 0;
padding: 0;
}
.navbar-default{
background-color: rgb(66, 134, 244);
}
.under {
border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
width: 300px;
}
.jumbotron{
height: 400px;
background: url("https://puppydogweb.com/wp-content/uploads/2015/05/54_2383_Cute-Puppies-puppies-16094619-1280-800.jpg");
background-size: cover;
background-position: 0 50%;
}
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- Button nav for small screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand name -->
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<!-- Makes nav not expand on resize -->
<div class="collapse navbar-collapse" id="myNavbar">
<!-- Menu -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- Dropdown menu -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!-- Non dropdown -->
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center under">
<h1>Website Heading</h1>
<p>Information about the website!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-leaf size"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass btn-lg"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus btn-lg"></span>
</div>
</div>
</div>
</body>
So everything that has resolution < tablet resolution will see the black head puppy.
#media (max-width: 768px) {
.jumbotron{
background-position: 100% 50%;
}
}
you should add the following rules to the .jumbotron
background-repeat:no-repeat;
background-size:contain;
background-position:center;
To have the jumbotron scale and always show the full background image, make the height of the jumbotron 0, then use a percentage of padding that matches the aspect ratio of the image to create that same amount of padding in the jumbotron.
The image is 1920x1080. Represented as a percentage, 1080/1920 = 56.25%. Applied as a top or bottom padding, that will make jumbotron match that aspect ratio. Then you can absolutely position the text inside the jumbotron wherever you want. I introduced an element called .jumbotron-text for that.
* {
margin: 0;
padding: 0;
}
.navbar-default {
background-color: rgb(66, 134, 244);
}
.under {
border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
width: 300px;
}
.jumbotron-text {
position: absolute;
top: 2em;
left: 0;
right: 0;
}
.jumbotron {
height: 0;
position: relative;
padding: 56.25% 0 0 !important;
background: url('http://i.imgur.com/OXMygdn.jpg') 0 0 no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- Button nav for small screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand name -->
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<!-- Makes nav not expand on resize -->
<div class="collapse navbar-collapse" id="myNavbar">
<!-- Menu -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- Dropdown menu -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!-- Non dropdown -->
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center under">
<div class="jumbotron-text">
<h1>Website Heading</h1>
<p>Information about the website!</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-leaf size"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass btn-lg"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus btn-lg"></span>
</div>
</div>
</div>
</body>
</html>
While waiting for the code, did you add the responsive class to the image tag?
<img src="picture.jpg" class="img-responsive">

Overlapping profile picture in the middle

Currently i have the following Header(Template from Bootstrap for Responsive Purposes):-
But it's not very nice to have a such big navigation pane, so now i want to place the Profile Picture in the middle of the Border like this(The circle should be the profile picture):-
The question is, how can I achieve this without using a absolute position which would ruin my responsive design? (It should be a proportion of 50/50)
Edit: The HTML Code for the Profile Picture is:-
<div id="nav_profile">
<div class="profile_picture">
<img src="assets/img/profilepicture.png" alt="Profile Picture">
<figcaption><i class="ion-android-add"></i></figcaption>
<a id="profile_hover_txt" href="profile.php">View Profile</a>
</div>
</div>
The CSS Part is just for the transitions and the styling for the Picture.
Try The Following Code....
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand brand" href="#">Custom Logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>News</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <img width="50px" height="50px" class="img-circle" src="http://i.imgur.com/bQ6Rroe.jpg" alt=""></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
You can simply set the height of the picture to 200%. The float: right; and width: 100px; are just in my code so it works without an image but the principal works without them.
#menu {
width: 100%;
height: 50px;
background: #000000;
}
#pic {
float: right;
width: 100px;
height: 200%;
background: yellow;
}
<div id="menu">
<div id="pic"></div>
</div>

How do i make my nav-bar items stretch across the screen responsively

I'm wanting items in my nav bar to stretch across the width of the screen when on lets say a laptop, and go one-under another when on a phone.
Also, I don't like how my items are pushed over to the left , i want them to be equally spaced across the screen.
HTML:
<!-- Logo -->
<div class="navbar navbar-default navbar-fixed-top" role="">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img src="assets/images/BridgmanLogo.png" alt="Logo">
</a>
</div>
</div>
</div>
<!-- SLIDER -->
<header class="container-fluid intro-slider">
<div class="bg-slider-wrapper">
<div id="bg-slider" class="flexslider bg-slider">
<ul class="slides">
<li class="slide slide-1">
<div class="push-text-slide"></div>
<section class="home-promo">
<div class="text-center">
<h2 class="titlepro">
<span class="upper">Welcome to</span>
<span class="middle"><strong>Bridgman IBC Ltd</strong></span>
<span class="bottom">An Example Tag Line Goes Here</span></h2>
<span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop
</div>
</section>
</li>
<li class="slide slide-2">
<div class="push-text-slide"></div>
<section class="home-promo">
<div class="text-center">
<h2 class="titlepro">
<span class="upper">Welcome to</span>
<span class="middle"><strong>Bridgman IBC Ltd</strong></span>
<span class="bottom">An Example Tag Line Goes Here</span></h2>
<span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop
</div>
</section>
</li>
<li class="slide slide-3">
<div class="push-text-slide"></div>
<section class="home-promo">
<div class="text-center">
<h2 class="titlepro">
<span class="upper">Welcome to</span>
<span class="middle"><strong>Bridgman IBC Ltd</strong></span>
<span class="bottom">An Example Tag Line Goes Here</span></h2>
<span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop
</div>
</section>
</li>
</ul>
</div>
</div>
</header>
<!-- NAVIGATION BAR -->
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-brand">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home
</li>
<li>About
</li>
<li>Specifying
</li>
<li>Market Sectors
</li>
<li>Shop
</li>
</ul>
</div>
</div>
</div>
If I understand you correctly, there are some changes you should do:
Read the css I added. I'm using flex to stretch the item equally in the menu.
Remove the .container div to stretch the navigation to the width of the window.
Remove the .navbar-right class from the navigation you don't need it.
I didn't take care about the mobile I'm sure you know how to do all those changes in desktop only using media query.
.navbar-brand, .navbar-nav, .navbar-nav>li {
float:none !important;
}
.navbar-nav {
display:flex;
}
.navbar-nav>li {
flex: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- NAVIGATION BAR -->
<div class="navbar navbar-default" role="navigation">
<!--<div class="container">-->
<div class="navbar-brand">
<ul class="nav navbar-nav">
<!--<ul class="nav navbar-nav navbar-right">-->
<li class="active"><span class="glyphicon glyphicon-home"></span> Home
</li>
<li>About
</li>
<li>Specifying
</li>
<li>Market Sectors
</li>
<li>Shop
</li>
</ul>
</div>
<!--</div>-->
</div>
http://jsbin.com/wisuyi/edit?html,css
You will have to use media queries to get responsive view.
.navbar-brand{
width:100%;
display:inline-block;
}
.navbar-brand ul li{
width:20%;
/*Adjust the percent based on 100/number of items (Here it is 5)*/
min-width:150px;
/*Keep a minimum width such that the text does not overflow*/
display:inline-block;
text-align:center;
}
/*Write media queries for Mobile and tablets*/
#media (max-width: 420px) {
.navbar-brand ul li{
width:100%;
}
}

ScrollBar not showing up - BootStrap

I'm building a site in BootStrap and my scroll disapepeared completely. I now can't scroll up and down. Why is that? I already tried overflow, overflow-y, but I don't understand what I'm doing wrong.
HTML
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sugoi!</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="Anime">Anime</li>
<li class="Manga">Manga</li>
<li class="Jogos">Jogos</li>
<li class="Opiniao">Opinião</li>
<li class="Outros">
Outros <b class="caret"></b>
<ul class="dropdown-menu">
<li>AMV</li>
<li>Cosplay</li>
<li>Passatempos</li>
</ul>
</li></ul>
<ul class="pull-right nav navbar-nav">
<li>Sobre</li>
<li>Contacto</li>
</ul>
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sugoi!</h1>
<div class="jumbotron">
<div class="container">
<a href="http://google.com"><h1>Persona 4 - The Animation</h1>
<p>Sabe mais!</p></a>
</div>
</div>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Back to the default sticky footer minus the navbar.</p>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
</div>
CSS
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
#wrap > .container {
padding: 60px 15px 0;
}
.container .credit {
margin: 20px 0;
}
#footer > .container {
padding-left: 15px;
padding-right: 15px;
}
code {
font-size: 80%;
}
.jumbotron {
background-image:url('http://tomodom.com/wp-content/uploads/2013/07/Persona4Golden_Hero.jpg');
height:400px
}
The Div with the fixed position called "" doesn't close until after the page content, which is located just before the div with the id of Footer. Instead it should finish at the end of the nav section.
Copy this.
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sugoi!</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="Anime">Anime</li>
<li class="Manga">Manga</li>
<li class="Jogos">Jogos</li>
<li class="Opiniao">Opinião</li>
<li class="Outros">
Outros <b class="caret"></b>
<ul class="dropdown-menu">
<li>AMV</li>
<li>Cosplay</li>
<li>Passatempos</li>
</ul>
</li></ul>
<ul class="pull-right nav navbar-nav">
<li>Sobre</li>
<li>Contacto</li>
</ul>
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sugoi!</h1>
<div class="jumbotron">
<div class="container">
<a href="http://google.com"><h1>Persona 4 - The Animation</h1>
<p>Sabe mais!</p></a>
</div>
</div>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Back to the default sticky footer minus the navbar.</p>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>

How to make header take up all screen: Bootstrap

I would like to get my header to take up the whole screen. I have tried
header {
height: 100%
}
but that didn't change anything. I can get it to work but only by changing the amount of pixels and when I go onto a different computer it doesn't work.
Thank you anyone that can help me, if you need any more information please ask, I will be happy to provide it.
Here you go: HTML
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Webfolio</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#page-top">Home</a>
</li>
<li>
<a class="page-scroll" href="#accessibility">Accessiblity</a>
</li>
<li>
<a class="page-scroll" href="#usability">Usability</a>
</li>
<li>
<a class="page-scroll" href="#graphics">Graphics</a>
</li>
<li>
<a class="page-scroll" href="#javascript">JavaScript</a>
</li>
<li>
<a class="page-scroll" href="#tools">Tools</a>
</li>
<li>
<a class="page-scroll" href="#videos">Videos</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">My name is Ian Geer</div>
<div class="email">iandavidgeer#gmail.com</div>
<div class="intro-heading">Web Design:Ingraham 2016</div>
Main Content
</div>
</div>
</header>
and: CSS
header {
padding: 62px 63px;
text-align: center;
color: #fff;
background-attachment: scroll;
background-image: url(../img/seattle.jpg);
background-position: center center;
background-repeat: none;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
Easy solution:
header {
height: 100vh;
}
This uses viewport units. Depending on the browsers that you are supporting, this is probably your best option. Browser support for viewport units
If you need to support IE8 or older mobile browsers, you can do this instead:
html, body {
height: 100%;
}
header {
height: inherit;
}