Load background image after content loads

[05beckga]

Hi Im trying to create an effect where when the page loads my will content fade in and once my content has faded in then I would like my background image to fade in. Im not sure how to fade in the background image just after my content has loaded

https://jsfiddle.net/5nx3n8z9/1/ Here you can see that my content is fading in. I’m trying to get the background to go after. At the moment I can only fade in both the image and writing at the same time.

Any help would be much appreciated.

[Pepster64]

Just asking a question wouldn’t fading in the text first before the image be hard to see? The Text is white and so is the background. Just curious.

[PaulOB]

Assuming its the image on the body that you want to fade in then you can’t fade the body as that fades everything. You need to put the image in another element and then you can control that separately from the body.

e.g.Move the background image from the body and into the :after element instead and then animate that element with a 2s delay (animation:bgFade 2s 2s forwards;) which will occur after the text has faded in. This assumes you are keeping the body background blue because as Pepster64 said you would see nothing if white text is faded on a white background

These are the changes needed. Change your body rules to the following and add the body:after code.

body {
	background-color: blue;
}
body:after {
	content:"";
	background: url(http://misc.rewish.jp/jquery-bgswitcher/images/image_3.jpg ) no-repeat 0 0;
	background-size: cover;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	opacity:0;
	z-index:-1;
	animation:bgFade 2s 2s forwards;
}
@keyframes bgFade {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    } 
}

Of course this doesn’t take into account how quick the page loads so you may want to add some js to detect when the page has finished loading and then add a class to the html element and use that class in your style rules for the animation. It all depends on how complicated your page is whether you need to do that or not.