Background image not fading in

Question

I've been trying to figure out why my background image is not fading in. I've tried using css/jquery and also the w3 route. I can see that the background image is actually showing up and I have checked to see that the jquery code is actually working for any tags I nest inside the body tag. I have read other posts but they are not helping.

$(document).ready(function(){
    $("body").hide().fadeIn(3000);
});

body {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../images/index.jpeg');
}

<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/myScript.js"></script>
</head>


<body>


</body>
</html>

Try after removing `hide()` . Like `$("body").fadeIn(3000);` — Yogesh Patel, Sep 11 '17 at 05:18
Check this https://stackoverflow.com/questions/7319552/can-i-fade-in-a-background-image-css-background-image-with-jquery — XYZ, Sep 11 '17 at 05:23
look at [this](https://jsfiddle.net/3h8buLwx/1/). Is this what you want? — Shadow Fiend, Sep 11 '17 at 05:26
I tried with your `body` class. It is working with me. May be some issue in some .js or .css file. Add reference of .css and .js one by one. So you can identify from which file issue occurs. — Yogesh Patel, Sep 11 '17 at 05:26
Thank you Shadow Fiend it worked. Why does that css code differ greatly from the one I had originally? — sasukedotcom, Sep 11 '17 at 05:31
i just change the body tag to the div and set the height.. those are the important changes.. the other things are just bonus. — Shadow Fiend, Sep 11 '17 at 05:36
Possible duplicate of [Can I fade in a background image (CSS: background-image) with jQuery?](https://stackoverflow.com/questions/7319552/can-i-fade-in-a-background-image-css-background-image-with-jquery) — Paolo Forgia, Sep 11 '17 at 09:30

score 1 · Accepted Answer · answered Sep 11 '17 at 05:39

1

$(document).ready(function() {
  $("body").hide().fadeIn(3000);
});

html,body{
  margin:0;
  padding:0;
}

div{
  width:100%;
  height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/009/940.jpg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>

answered Sep 11 '17 at 05:39

Shadow Fiend

1,829
1
9
14

@user3871288 In this the fade is working on the body.All the content inside the body will fade in.The background image is inside a div inside the body.It is not the background image that fades in. – XYZ Sep 11 '17 at 05:47
1

before I also tried body tag but won't work.. so I made a div as the container of the page and add a fade in.. I don't know if you can make another approach.. – Shadow Fiend Sep 11 '17 at 05:48

score 0 · Answer 2 · answered Sep 11 '17 at 05:33

You can use setTimout

$(document).ready(function(){
    setTimeout(function() {
    $("body").css("background-image", "url('https://s13.favim.com/orig/170403/aesthetic-forest-nature-photography-Favim.com-5145568.png')");
}, 2000);
});

body {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>just text here</p>

Background image not fading in

2 Answers2