How to make background image fade in with css when page loads?

Question

Hello I am trying to fade in the background image into my website by using all css if possible. When users visit the home page I would like for the image to fade in. I am having issues doing so unless I have to add jquery or javascript to do so. Here is my code:

<!doctype html>
<html>
<head>
<title>Paradox Entertainment</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">



body {
    margin:0;
    font-family:arial,helvetica,sans-serif;

    background-image:url("images/2_petski.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-color:#000000;
    color: #ffffff;
    padding: 350px;


}

ul { 
        list-style: none 

 }



</style> 

</head>


<body>






</body>
</html>

Thank you in advance if I can get any sort of resource or code help.

http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load — Matt Hammond, Jun 20 '15 at 22:51
i don't want you to write the code for my body @PraveenKumar . I'm seeking a function or a possible css method. — user2627437, Jun 20 '15 at 23:08
The link, that I used to close has the same question answered. If it doesn't answer your question, I will be happy to reopen this question! — Praveen Kumar Purushothaman, Jun 20 '15 at 23:09
Have you considered using a CSS only solution? https://stackoverflow.com/questions/14313825/multiple-image-cross-fading-in-css-without-java-script — Adriano, Mar 18 '18 at 21:33

Praveen Kumar Purushothaman · Accepted Answer · 2021-03-08T22:48:05.070

With the same code, I guess you can do the one in Pure CSS. Does the following fiddle work for you? You can use the timing function to change the delay. Currently it is 4 seconds.

.fadeImage {
    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
    display: block;
    margin: 25px auto;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

 <img src="https://i.stack.imgur.com/d4lWr.jpg" alt="Image" class="fadeImage" />

Thank you so much for the sources sir. Very much appreciative. — user2627437, Jun 21 '15 at 00:04
@user2627437 That's what I said. I didn't do much than searching buddy! :) — Praveen Kumar Purushothaman, Jun 21 '15 at 11:02

How to make background image fade in with css when page loads?

1 Answers1