3

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 &copy; 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%;
}
  • 1
    Using and img element might not be what you need. This case you'd get better results applying `background: url(....)` to the `.tint` element or another suitable container (like header) along with `background-size: cover;` (i.e: using any background-* property on an img element won't probably work). – Wazaraki Mar 12 '16 at 04:34
  • The problem is I don't want the image to be fixed the entire time. I plan to add more content below the image, so as the user scrolls, the image vanishes. Would your technique allow me to do that? What parts do I need to change in my HTML if so? –  Mar 12 '16 at 04:38
  • 1
    I think so! Is this something close to the result you want to accomplish? http://codepen.io/wilman/pen/vGKqjm I added more content below the header and as the user scrolls down more content enters the screen nicely. We can adjust it further if you need it. – Wazaraki Mar 12 '16 at 04:53
  • Yessir that is pretty much exactly what I need. However the first image should take up the whole screen - that's an easy fix which I've applied though. I tried to implement this into mine using pretty much your code but it's showing the background image twice. –  Mar 12 '16 at 05:01
  • 1
    Ah, you would need to remove the entirely as you are now controlling backgrounds via css only. Does that solve the issue? :) – Wazaraki Mar 12 '16 at 05:04
  • Unfortunately not - it shows no background image now. I have edited code into OP for convenience. –  Mar 12 '16 at 05:06
  • 1
    I saw your updated code. Viewport units will definitely work better for the height. I put 90vh equivalent to 90% of the screen for demonstration only. You can set the height to `100vh` for 100%. More info here: https://css-tricks.com/viewport-sized-typography/ – Wazaraki Mar 12 '16 at 05:11
  • That's fixed it cheers. I have a little whitespace at the bottom that I can't workout where it's coming from: https://gyazo.com/824d87116e11a41de26cf9ab97170d4b, and secondly, is there no way to add the tint? Cheers :) –  Mar 12 '16 at 05:14
  • Yes! I added a couple of lines to the codepen which accomplish that, comments included. Go CSS! http://codepen.io/wilman/pen/vGKqjm – Wazaraki Mar 12 '16 at 05:30

1 Answers1

1

The answer is in the page you linked: background-size: cover;.

Working Example on how to apply it here: http://codepen.io/wilman/pen/vGKqjm

body {
  background: url(background.jpg) center no-repeat fixed;
  background-size: cover; /* forces bg to span the entire screen */
  background-color: #111;
  color: #FFF;
}

Also try to avoid using html img elements for backgrounds as they are not very convenient for that purpose. See When to use IMG vs. CSS background-image? for more info.

Community
  • 1
  • 1
Wazaraki
  • 454
  • 2
  • 7
  • I have tried that and it doesn't seem to work; I will post my code in a moment for convenience. –  Mar 12 '16 at 04:28