How to Add GIF in HTML?

Last Updated : 11 Jun, 2025

GIFs (Graphics Interchange Format) are the popular image format that supports both animated and static images. Adding the GIFs to the HTML document enhances the visual appeal and the user interaction of the web pages. They are commonly used for loading animations, fun illustrations, or visual explanations.

There are multiple ways to add the GIFs to an HTML document:

Using the <img> Tag

The image tag is the standard way to embed the images in an HTML document, including GIFs. It is a self-closing that allows you to specify the source of the image, alternative text for accessibility, and other attributes like width and height.

Syntax

<img src="path-to-your-gif.gif" alt="Description of GIF" />

Example 1: This example shows the use of img tag for adding GIF.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
          initial-scale=1.0">
    <title>GIF Example</title>
</head>
<body>
    <h2>Displaying a GeekforGeeks GIF using the
        <code>&lt;img&gt;</code> tag:
    </h2>
    <img src="gfg1.gif" alt="GeekforGeeks" width="400" height="300" />
</body>
</html>

Output

Using the CSS as a Background Image

Using the GIF as a background image via CSS is another effective method, especially for design the elements like buttons, divs, or entire sections of the webpage. This method can often used for the decorative purposes.

Syntax

<style>
    .class-name {
        background-image: url('path-to-your-gif.gif');
        background-size: cover;
        background-repeat: no-repeat;
    }
</style>

Example 2: This example shows the use of CSS to add the GIF as a background.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
           initial-scale=1.0">
    <title>GIF as Background Image</title>
    <style>
        .gif-background {
            width: 500px;
            height: 300px;
            background-image: url('gfg1.gif');
            background-size: cover;
            background-repeat: no-repeat;
            border: 2px solid #ccc;
            text-align: center;
            line-height: 300px;
            color: black;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h2>Using a GIF as a background image:</h2>
    <div class="gif-background">
      This is a div with a GIF background</div>
</body>
</html>

Output

Using the JavaScript

JavaScript can provides the dynamic control over the DOM, making it possible to add the GIFs programmatically. This approach can be useful for the dynamically loading content based on the user interaction or specific conditions.

Syntax

let  img = document.createElement("img");
img.src = "path-to-your-gif.gif";
document.getElementById("target-element").appendChild(img);

Example 3: This example shows the use of JavaScript for adding GIF.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>GIF GeekforGeeks</title>
</head>
<body>
    <h2>Adding a GeekforGeeks using JavaScript:</h2>
    <div id="gif-container"></div>
    <script>
        let img = document.createElement("img");
        img.src = "blinkgfg.gif";
        img.alt = "A Dynamic GeekforGeeks GIF Example";
        img.width = 400;
        img.height = 200;
        document.getElementById("gif-container").appendChild(img);
    </script>
</body>
</html>