Making fullscreen background image appear after 5 seconds

I have background image in css that I want to animate so it's appears after 5 seconds instantly (with no transition) CSS:

body {
font-family: 'Roboto', sans-serif;
background-color: #0d0d0d;
color: #dedede;
animation: none;
background:url(img/cat.gif) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

There will be a <table> element in the foreground.

Solution

Your question is somewhat unclear but I don't have the reputation to comment, in order to ask you to provide more specifics but... based on the info you've put I inferred the following:

You want a background image to show up on your body after 5 seconds, without a transition (like a toggle).

Given you didn't tag any framework/library I'm going to do this in vanilla JS.

Unfortunately I believe you will need to create a script to do this unless a raw CSS solution is possible to which I am not familiar with.

What you can do is create a 'background div' that will sit on your page, and give it a fixed position property, and an expansive nature to which it will occupy the entire screen-span.

Here's a snippet (I don't have your local cat file so improvised with a web-link):

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title></title>
<style>
.popout-div {
    font-family: 'Roboto', sans-serif;
    background-color: #0d0d0d;
    color: #dedede;
    animation: none;
    background:url("https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}
</style>

<script>
function showBackground() {
  var element = document.getElementById("page-bg");
  element.classList.add("popout-div");
}

var counter = 0;
var interval = setInterval(function() {
    counter++;
    if (counter == 5) {
        showBackground();
        clearInterval(interval);
    }
}, 1000);
</script>
</head>
<body>
    <div id="page-bg"></div>
        <table>
            <thead>
                <tr>
                    <th>Some</th>
                    <th>Table</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Some</th>
                    <th>Table</th>
                </tr>
            </tbody>
        </table>
</body>
</html>

The properties remain largely unchanged other than the position properties within .popout-div. z-index is used to denote that this image should be sat below the content on the page (-1) by default, if you wish this to display on top of content, set it to a higher value.

Otherwise the script launches when the page loads, to count down. Once 5 seconds are up, showBackground() is called which applies the class to the page-bg div.

Useful resources:

1) z-index

2) layout

3) classlist