I have a background image that is covering my content but without (background-size: cover;) it doesn't take up the space. I am working on a bootstrap project, and all my content is stacked at the top of the page in the banner area. I've tried adding height to the page to move content. I've tried adding a div around it and moving around in the body tag. I have been working on the for about 3 hours.
#import url('https://fonts.googleapis.com/css?family=Oswald|Rambla|Staatliches&display=swap');
body{
margin: 0;
padding: 0;
}
:root{
--color-black: #000000;
--color-white: #ffffff;
--color-border: #ffffff34;
--font-staat: 'Staatliches', cursive;
--font-os: 'Oswald', sans-serif;
--font-ram: 'Rambla', sans-serif;
}
/* global classes */
.font-staat{
font: normal 400 18px var(--font-staat);
}
.font-os{
font: normal 300 18px var(--font-os);
}
.font-ram{
font: normal bold 18px var(--font-ram);
}
.font-size-40{
font-size: 40px;
}
.font-size-34{
font-size: 34px;
}
.font-size-27{
font-size: 27px;
}
.font-size-20{
font-size: 20px;
}
.font-size-16{
font-size: 16px;
}
.bgcolor-black{
background-color: var(--color-black);
}
/* #global classes */
#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index:1;
transition: left .5s ease;
}
#header nav{
height: 100vh;
}
#header .site-title .navbar-brand{
letter-spacing: 2px;
color: var(--color-secondary);
}
#header .nav-link{
margin: .7rem 1rem;
border-bottom: 1px solid var(--color-border);
text-transform: uppercase;
}
#header .nav-link:hover{
color: var(--color-white) !important;
}
#header .toggle-button{
background: none;
color: var(--color-black);
position: fixed;
top: 25px;
right: 20px;
border: 1px solid var(--color-border);
}
.toggle-left{
left: 0 !important;
width: 1000px !important;
}
/* site-main */
.site-banner .banner-area{
background: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg) no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.site-banner .banner-area .author{
margin: 0;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.site-banner .banner-area .author .author-img{
width: 250px;
height: 250px;
border-radius: 50%;
margin: auto;
background: url(./20200507_023239272_iOS.jpg) no-repeat;
background-size: 115%;
background-position: 15% 20%;
}
#media screen and (min-width: 768px){
.toggle-button{
display: none;
}
#header{
z-index:0;
}
}
/* #site-main */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaija Dunklin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- header area -->
<header id="header">
<div class="row m-0">
<div class="col-3 bgcolor-black">
<nav class="primary-nav navbar-expand-md">
<div class="site-title text-center text-light py-5">
Kaykay
<p class="description text-uppercase font-os"> Kaija Dunklin</p>
</div>
<div class="d-flex flex-column">
Home
Skills
projects
Education
Experience
Resume
Contact
</div>
</nav>
</div>
</div>
<button class="toggle-button"><span class="fas fa-bars fa-2x"></span></button>
<div class="social">
<span class="mr-3"><i class="fab fa-linkedin"></i></span>
<span class="mr-3"><i class="fab fa-github"></i></span>
</div>
</header>
<!-- #header area -->
<main id="site-main">
<div class="row m-0">
<div class="col-md-9 offset-md-3 px-0">
<!-- site-banner area -->
<section class="site-banner" id="home">
<div class="banner-area">
<div class="author text-center">
<div class="author-img"></div>
<h1 class="text-white font-staat font-size-40 text-uppercase py-3">Kaija Dunklin</h1>
</div>
</div>
</section>
<section id="skills">
<i class="fab fa-github-square" >GitHub</i>
</section>
<!-- #site-banner area -->
<section id="projects">
<div>
</div>
</section>
</div>
</div>
<div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>
<script src="./vendor/typed/typed.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
I'm really not sure what you are trying to achieve, but I guess I got what you wanted:
I set the background on separate div which I then set the background image to and then with Z-index value on css moved behind other content you may add on your page.
.background-img {
/*of course with this solution you should remove the previous background image*/
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-image: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg);
background-size: cover;
/* Without z-index the background seems to cover the content*/
z-index: -1;
}
<!--I added this empty div to hold the background image-->
<div class="background-img">
</div>
I really did not dive that deep to your source files, so I am not sure if this helps, but I hope so
Related
I have made this site(http://koulick-project.surge.sh/)as a project but cannot make it fully responsive. How to make it responsive, so that it looks good on mobile/tablets. So far, I could make the headings and text responsive. But cannot make the circles for the clock responsive.
Here is my Html file-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Pragmatic Mates s.r.o. - http://pragmaticmates.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="demo/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="demo/css/coming_soon.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
<title>JWOC Coming Soon</title>
</head>
<body>
<div class="centerdiv">
<a href="https://www.facebook.com/jwoc2k20" target="_blank">
<i class="fa fa-facebook fa-3x"></i>
</a>
<a href="https://www.linkedin.com/company/jwoc/" target="_blank">
<i class="fa fa-linkedin fa-3x"></i>
</a>
</div>
<div class="section">
<div class="section">
<div id="particles-js">
<break>
<h1 style="color:white"><b>JWOC</b></h1>
<h1 style="color:white"><b> COMMENCING SOON</b></h1>
<hr>
</div>
</div>
</div>
<div class="countdown countdown-container container">
<div class="clock row">
<div class="clock-item clock-days countdown-time-value col-xs-3 col sm-3">
<div class="wrap">
<div class="inner">
<div id="canvas-days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-hours countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-minutes countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-seconds countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
</div><!-- /.clock -->
<hr>
</div><!-- /.countdown-wrapper -->
<!-- footer section -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="demo/js/kinetic.js"></script>
<script type="text/javascript" src="jquery.final-countdown.js"></script>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$('document').ready(function() {
'use strict';
$('.countdown').final_countdown({
'start': 2062139200,
'end': 2088461320,
'now': 2087461319
});
});
</script>
</body>
</html>
Here is my Css file-
*{
margin: 0;
padding: 0;
}
html, body {
background-repeat:no-repeat;
height: 100vh;
overflow:hidden;
}
html {
background-image: url('../img/open.jpeg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgba(44,62,80 , 0.6 );
background-image: url('../img/open1.jpg');
background-position: center;
background-repeat: repeat;
font-family: 'Raleway', 'Arial', sans-serif;
margin: 0;
padding: 0;
height: 100vh;
}
#particles-js
{
z-index: 99999;
height: 500%;
display: flex;
justify-content: center;
align-items: left;
}
.particles-js-canvas-el{
position: absolute;
width: 100%;
height: 100%;
z-index: 99999;
}
h1{
font-size: 70px;
letter-spacing: 15px;
text-align: center;
}
a{
height: 100px;
width: 100px;
border-radius: 50px;
text-align: center;
margin: 10px;
line-height: 110px;
}
a i{
transition: all 0.3s linear;
}
a:hover i{
transform: scale(1.4);
}
.fa-linkedin{
color: #0097e6;
}
.fa-facebook{
color: #3b5998;
}
/*
.countdown-container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
*/
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
#media only screen and (min-width: 393px) and (max-width: 767px) {
h1{
font-size: 40px;
letter-spacing: 10px;
}
.text {
font-size: 15px;
}
.text .val {
font-size: 15px;
}
.text .type-time {
font-size: 15px;
}
.clock-item .inner {
width: 150%;
}
}
Can anyone please help.
Try using a column break to split up the timer into multiple rows on smaller screen sizes.
https://getbootstrap.com/docs/4.0/layout/grid/#column-breaks
Tablet+
D H M S
Phone
D H
M S
i cant get the image cover my whole jumbotron with text over it. Here is my html and CSS. Im trying to get the whole image; "img/newyork.jpg" cover my jumbotron. I know there is an easy way but i cant figure what im missing. Please help.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title> Marketing Plus </title>
</head>
<body>
<div class="header">
<div class="container">
<ul class="nav">
<div class="logo">
<img src="img/logo_mplus.png" alt="logo for marketing plus">
</div>
<li>Contact</li>
<li>Industries</li>
<li>Company</li>
<li>Home</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="main">
<img src="img/newyork.jpg" class="img-responsive" />
<div class="container" id="content">
<div class="row">
Marketing Plus
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
</html>
/*CSS starts here*/
.nav {
list-style-type: none;
margin: 0;
padding: 20px 0;
}
.nav li {
color: 00000;
display: inline;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
margin-right: 25px;
text-transform: uppercase;
}
.logo img {
margin-left:120px;
margin-right:auto;
margin-top:0px;
border:0px ridge #E80000;
background-image: url("img/logo_mplus.png");
background-size:199px 101px;
width:199px;
height:101px;
background-repeat:no-repeat;
background-position:center;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
padding: 10px;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}
.img-responsive {
background: url(img/newyork.jpg);
background-size: cover;
}
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>
I'm trying to create a portfolio for freecodecamp, however I can't find out how to center the button, and or div labeled "row" on the page. I need the row div as I will later be adding more buttons, but for now I only need the FCC button. Below are both my html and css files for my site so far. Any help is welcome!
HTML:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<!-- Web page starts here -->
<body id="body">
<section id="land">
<h1 id="mpp" class="text-center"> My Personal Portfolio </h1>
<div class="row" id="btnrow">
<i class="fa fa-file-code-o"> Free Code Camp</i>
</div>
</section>
<section id="intro">
</section>
</body>
CSS:
#body {
height: 100vh;
width: 100%;
}
#mpp {
font-family: Monospace;
font-size: 50px;
color: white;
padding-top: 15%;
margin: 0;
}
#land {
background: url(http://img.hrhwalls.com/images2/ki13j11c4ef.jpg);
width: 100%;
height: 100vh;
}
#fcc {
background-color: #016403;
text-decoration: none;
color: #FFFFFF;
font-size: 17px;
position: inherit;
}
#btnrow {
right: 50%;
}
#btnrow {
display: flex;
justify-content: center;
}
Should do the trick. See working example below
#body {
height: 100vh;
width: 100%;
}
#mpp {
font-family: Monospace;
font-size: 50px;
color: white;
padding-top: 15%;
margin: 0;
}
#land {
background: url(http://img.hrhwalls.com/images2/ki13j11c4ef.jpg);
width: 100%;
height: 100vh;
}
#fcc {
background-color: #016403;
text-decoration: none;
color: #FFFFFF;
font-size: 17px;
position: inherit;
}
#btnrow {
display: flex;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<!-- Web page starts here -->
<body id="body">
<section id="land">
<h1 id="mpp" class="text-center"> My Personal Portfolio </h1>
<div class="row" id="btnrow">
<i class="fa fa-file-code-o"> Free Code Camp</i>
</div>
</section>
<section id="intro">
</section>
</body>
You could give the div a width and use margin auto for the left and right values, this will center the element horizontally.
.row {
margin: 0 auto;
width: 150px; /*or any measurement*/
}
I have created a splash page using Bootstrap, on different monitors it looks as expected and scales down and up.
However If keep the window small in height and expand the width it doesn't look as I want it to, this is the same when viewing on mobile device in landscape.
I have 2 sections which should display vertically 50% of the screen each however on landscape it doesn't reduce the size enough and it overlaps, is there a way to stop this?
The splash screen is here http://communitec.co/
And here is my code
CSS - http://pastebin.com/WvVh8c35
HTML - http://pastebin.com/V8d8FqUK
body,
html {
width: 100%;
height: 100%;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
}
.topnav {
font-size: 14px;
}
.lead {
font-size: 18px;
font-weight: 400;
}
.intro-header-two {
text-align: center;
color: #f8f8f8;
background: url(../img/headerOne.jpg) no-repeat center center;
background-size: cover;
height:50%;
}
.intro-header {
text-align: center;
color: #f8f8f8;
background: url(../img/headerTwo.jpg) no-repeat center center;
background-size: cover;
height:50%;
}
.intro-message {
position: relative;
}
.btn-av {
padding:10px 20px;
color:#fff;
border: 2px solid #fff;
background:none;
border-radius:4px;
margin-bottom:15px;
}
a .btn-av:hover {
background: #E9E9E9;
color:#000;
}
<link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- First Header Image -->
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message" style="margin-top: 60px;">
<img src="img/AVLOGO.png" class="img-responsive" style="margin: 0 auto; width:65%;">
<h4 style="margin-bottom: 25px;">Bringing technology into design</h4>
<button class="btn-av">Enter Site</button>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<!-- First Header Image -->
<div class="intro-header-two">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message"style="margin-top: 60px;">
<img src="img/ITLOGO.png" class="img-responsive" style="margin: 0 auto; width:65%;">
<h4 style="margin-bottom: 25px;">Technology solutions for home and business</h4>
<button class="btn-av">Enter Site</button>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
You will have to add overflow: auto to .intro-header & .intro-header-2 :
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
color: #f8f8f8;
background: url(../img/headerTwo.jpg) no-repeat center center;
background-size: cover;
height: 50%;
float: left;
width: 100%;
overflow: auto;
}
.intro-header-two {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
color: #f8f8f8;
background: url(../img/headerOne.jpg) no-repeat center center;
background-size: cover;
height: 50%;
float: left;
width: 100%;
overflow: auto;
}