Question 43573 in Html Question posted in
Some basic documentation can be found here.

Unable to get the GIF URL to loading when running the HTML code

Trying to get the GIF’s to load on the HTML and can’t get them to load

Example:

.img-1 {
  background-image: url("https://giphy.com/gifs/cute-cat-big-lover-ZYKyJVeXiteqB5bbrl");
}
<div class="tile">
  <div class="img-wrapper img-1">
  </div>
  <div class="caption">
    NOM NOM NOM
  </div>
</div>
Tags:

2

Answers


  1. 0

    What you are doing is using a link, not a URL to an image. The URL of the image will work with this:

    .img-1 {
background-image: url("https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExYTJhNjIwY2ZiYTA4NDRmM2ViYmQyOWY5NDJiM2U3MDZlODViMDUyNiZjdD1n/ZYKyJVeXiteqB5bbrl/giphy.gif");
}

    but as the div has no size and not content, it won’t be displayed.
    See this: https://jsfiddle.net/9wL8rtxg/

    Login or Signup to reply.
  2. 0

    The way you’re trying to approach this has many problems. I can suggest you some other ways to do this. But before that, interesting experiment: add a letter (e.g. F) inside your div as plain text, and you’ll see that the line where the F is, has now the GIF as a background, but only there, as shown in the image below. That’s because, before that, your div has no content, therefore it takes up no space (I’m guessing, didn’t look much into it).

    enter image description here

    Now, I’m not sure what you want to do exactly. Do you want just an image above your text? This is how I would do it:

        <div class="tile">
  <img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYTJhNjIwY2ZiYTA4NDRmM2ViYmQyOWY5NDJiM2U3MDZlODViMDUyNiZjdD1n/ZYKyJVeXiteqB5bbrl/giphy.gif">
    
  </img>
  <div class="caption">
    NOM NOM NOM
  </div>
</div>

    Or you can embed the GIF by pressing "Embed" in giphy.com and then copying and adding the code snippet from there to your code. Then your code should be something like this:

        <div class="tile">
  <iframe src="https://giphy.com/embed/ZYKyJVeXiteqB5bbrl" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/cute-cat-big-lover-ZYKyJVeXiteqB5bbrl">via GIPHY</a></p>
  <div class="caption">
    NOM NOM NOM
  </div>
</div>

    Or do you want this GIF as the background of your page? Then you don’t need the first div at all, you just add this to your CSS:

    body{
  background-image: url(https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYTJhNjIwY2ZiYTA4NDRmM2ViYmQyOWY5NDJiM2U3MDZlODViMDUyNiZjdD1n/ZYKyJVeXiteqB5bbrl/giphy.gif);
}

    Also, something very important: Do you see how I’m using a URL that ends with .gif? This is how you need to link images/gifs/etc otherwise it won’t work. You can get that link if you right-click and click on "copy image address"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search