Search code examples
cssbackground-imagegif

GIF Background Image not appearing on my page

I want to use a GIF file as a background image on my web page but its not working when I style it in CSS.

CSS

Body{
 background-image: url("1554323659436.gif");
 background-repeat: no-repeat;
 background-size: 50% 50%;
 content:white;
 width: auto;
}

I have ensured the GIF name is accurate, but the image isn't appearing in the page's background. Can someone help out?

Solution

  • Hope this answer helps. From my experience, gif images or images in general fail to appear when folder structure is not defined properly. Please check a standard format for attaching gif or any image type in html background

    body {
 background-image: url("[path_to_image]/1554323659436.gif"); /* The image used */
 background-color: #cccccc; /* Used if the image is unavailable */
 height: 500px; /* You must set a specified height */
 background-position: center; /* Center the image */
 background-repeat: no-repeat; /* Do not repeat the image */
 background-size: cover; /* Resize the background image to cover the entire container */
}

    Please note, all of the other attributes can be optional except the first one. Good Luck!