Background GIF Url doesn't repeat

HTML & CSS
1

Hi guys!
What is a problem with this code. It works when I embed URL from other host, but it doesn’t work when I upload gif from local files. Here is the code that works:

#loader {
  background:url('http://gifyu.com/images/preloader28.gif') repeat;
    width: 100%;
  height: 100%;
  display: block;
  background-position: center; 
}

Any suggestions?

3

When it doesn’t work, are you sure you have the path to the image correct?

4

I think it may be the image size, it is 1080px high with a lot of whitespace top and bottom.
If the container is any less high than that, you won’t see the repeat.

1 Like
5

ok so I change it to 600px. What about whitespace top&bottom?

6

That depends on how you decreased the height. Did you scale the whole image down, or crop the space from the top and bottom?
But I don’t know the expected result you want.

7

The image has a white background you can use white background color in css.

1 Like
8

That’s a good point, cropping off all that space will save a lot of pixels.
In fact, I don’t know why you are using an image for text anyway.

9

I cropped image now for 960px, same results. You can see how it goes here: www.adambugaj.pl

10

I still see the 1920 x 1080 image (though it may be my cache). You would need a giant monitor to see that repeat.
Maybe set a background-size to make it fit smaller screens.

11

I made this animation in AF and then made GIF, therefore I didn’t have to code it(it’s just faster).

12

If css doesn’t work, so maybe JS works. I have this:
jQuery(window).load(function() {
jQuery(“#loader”).delay(2000).fadeOut(“slow”);
jQuery(“#loader-wrapper”).delay(2000).fadeOut(“slow”);

13

I think you’re misunderstanding background repeat. It looks as though what you’re after is fade-in/out, not repeat.

14

I’m sure what you want can be done with css. but without knowing exactly the results you want it is very difficult to advise how to achieve that.
The problem with the repeat is, the image is the size of a HD monitor, so to see it repeat, you would need a monitor much bigger than standard HD ( or an image that is smaller :wink:).

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.