azuz53487 azuz53487 - 7 months ago 23
HTML Question

Background Fade In On Load

I'm trying to make my background fade in upon entering the website. I've tried several methods that does work. However, I'm just having trouble centering the background on different resolution. As you can currently see upon entering my website, whenever you resize your browser, the background would be in the middle at all times. Website: http://studi0.ml/ That's exactly what I'm trying to achieve, yet still have the globe to be in the middle at all times. And my background is pure CSS. Keep in mind, I just started website designing. I've been trying to code for 2-3 weeks now.



html,
body {
background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition: background 0.0s linear;
-moz-transition: background 0.75s 0.0s linear;
-o-transition: background 0.75s 0.0s linear;
transition: background 0.75s 0.0s linear;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}




Answer

I would recommend a different setup if you want a background image to fade in on page load. You can have a separate div in a different flow than the rest of your page and have it animate to an opacity of 1 on page load.

HTML

<html>
<head> ... </head>
<body>
    <div class="page-bg"></div>
</body>
</html>

CSS

html, body {
    height: 100%;
    width: 100%;
}

body {
    position: relative;
}

.page-bg {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed;
    background-size: cover;

    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    animation-fill-mode:forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Of course you might need to add polyfills for the animation and keyframes declarations. (i.e. -moz-animation-name, -webkit-animation-name, etc..)

Here is a working example on Plunkr. I had to swap the image you used with one with a https link so there wouldn't be an issue loading it.