I'm in the process of building a webpage, and I have a background image that spans the entire screen. When pressing ctrl and - (or ctrl and scrolling down), this scales down the image so it becomes smaller (I'm sure everyone's aware of what it does).
My question is, is there a css property that allows me to keep the image scaled (i.e. the size never changes, and it still spans the whole webpage) regardless of zooming in and out of the window?
I've googled for my answer, checked w3school, etc, but everything seems to be linking to actually physically scrolling up and down the webpage and leaving the image static, which is not what I want.
This is what my webpage looks like normally: https://gyazo.com/bf2a6cbcd8bda136c371278c2ca7c538
and when I zoom out: https://gyazo.com/0a79d2142073fa0dec0eba60e8f9c5e4
I'd like the background to continue spanning the entire page, I don't care about the navigation bar/footer size decreasing.
http://www.dragonstoneproductions.com/ This website demonstrates what I'm trying to achieve (try zooming out).
Any help/pointers to some resources is much appreciated
HTML:
<head>
<meta http-equiv="refresh" content="4">
<link href="main1.css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
</head>
<header>
<nav>
<ul>
<li class="active"><a href="index.html"><strong>Home</strong></a></li>
<li><a href="about.html"><strong>About Me</strong></a></li>
<li><a href="portfolio.html"><strong>Portfolio</strong></a></li>
<li><a href="contact.html"><strong>Contact</strong></a></li>
<li><a href="links.html"><strong>Links</strong></a></li>
</ul>
</nav>
</header>
<body>
</body>
<footer>
<div class="col">
Copyright © 2016<br>
<span style="font-size:0.6em;">HTML5 | CSS3 | JavaScript</span></span></div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/linkedin.png" alt="My LinkedIn" height="41" width="50" border="0">
</a>
</div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/gmail.png" alt="Email Me" height="41" width="50" border="0">
</a>
</div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/bitbucket.png" alt="My BitBucket" height="41" width="50" border="0">
</a>
</div>
</footer>
CSS:
body {
margin: 0;
}
header {
background: url(images/bg-image.jpg) center no-repeat fixed;
width: 100%;
height: 100%; /* viewport units are good for sizing big containers */
background-color: red;
background-size: cover;
}
.tint img {
opacity: 0.8;
background-size: cover;
}
nav {
position: fixed;
top: 0;
left: 0;
right:0;
background: rgba(139,23,28, 0.5);
padding-top: 5px;
padding-bottom: 5px;
}
nav h1 {
display: inline;
font-family: lobster;
color: #fff;
padding-left: 30px;
padding-right: 60px;
}
nav ul {
display: inline;
text-align : right;
}
nav ul li {
font-family: arial;
display: inline-block;
list-style-type: none;
padding: 5px 20px;
text-align: center;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
letter-spacing: 0px;
margin: 0;
font-size: 15px;
text-align: center;
}
footer {
background: #8B171C;
color: white;
width: 100%;
display: inline-block;
}
#copyright {
text-align: left;
padding-right: 150px;
display: inline;
}
.sociallink {
height: 30px;
width: 30px;
}
.col {
float: left;
margin: 1%;
}