When I try to minimize this page/resize it to a size smaller than my screen, espicially when it is minimized in a vertical manner (where the height of the page is longer than the width) the footer becomes blank/white and the background-image becomes shorter.
Take a look here.
<!DOCTYPE html>
<html>
<head>
<link href="style2.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<script src="https://use.fontawesome.com/4c228f39e6.js"></script>
<title>Magna Golf</title>
</head>
<body>
<nav class = "top-navigator">
<div class ="float-left"><a href="home2.html" target="_blank">Magna Golf</a></div>
<div class ="float-right">
<ul>
<li class ="navi-links"><a href = "#">Contact Us</a></li>
<li class ="navi-links"><a href ="#"> Members Login</a></li>
<li class ="navi-links"><a href ="#">About Us</a></li>
<li class ="navi-links"><a href="#">Guests</a></li>
<li class ="navi-links"><a href="#">Adena Meadows</a></li>
</ul>
</div>
</nav>
<div class = "center-container">
<div class ="logo"><img src ="horse.png" alt="Magna Golf Logo>" width="130px"</img>
</div>
<div class ="footer">
<div class="footer-text">Check Us out on Social Media
</div>
<div class="footer-social">
<ul>
<li class="social-links"><a class = "social" href="#" target="_blank">Facebook</a></li>
<li class="social-links"><a class = "social" href="#" target="_blank">Twitter</a></li>
<li class="social-links"><a class = "social" href="#" target="_blank">Instagram</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS---
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
}
a{
color:gold;
text-decoration: none;
}
a:hover{
color:white;
}
.top-navigator{
width:100%;
height:50px;
background-color:rgba(0,0,0,0.4);
backgroud-color:grey;
}
.float-left{
color:gold;
font-family:Cinzel, serif;
letter-spacing: 0.1em;
word-spacing: 0.0em;
width:160px;
font-size:20px;
position:relative;
top:25%;
margin-left:4%;
}
.float-right{
font-family:Cinzel, serif;
text-transform:lowercase;
font-size:12px;
width:530px;
position:relative;
margin-left:58%;
bottom:20%;
}
.navi-links{
display:inline;
margin-left:25px;
}
.center-container{
width:100%;
height:calc(100vh - 50px);
background-image:url("http://magnagolf.com/images/slideshow/bgd3.jpg"); background-size:100%;
background-repeat: no-repeat;
}
.logo{
width:75px;
position:relative;
margin:0 auto;
top:12px;
}
.footer{
width:100%;
position:absolute;
height:20px;
bottom:0; /*to get footer to sick to bottom*/
/*
background-color:rgba(0,0,0,0.4);
*/
}
.footer-text{
width:300px;
height:20px;
text-align:center;
font-family:Cinzel, serif;
font-size:14px;
color:white;
position:relative;
margin-Left:1%;
}
.footer-social{
font-family:Cinzel, serif;
font-size:13px;
width:260px;
position:relative;
bottom:23px;
margin-left:78%;
}
.social-links{
display:inline;
color:white;
margin-left:15px;
}
.social{
color:white;
}
The background image is a url so take sometime to post the code in your editor to see what I mean.
Cheers friends,