How to repeat GIF on webpage?

  Newuser3443 12:43 26 Jul 06


I have a small checker board gif which I want to repeat to create a checkered line 1/4 way across my webpage, but I'm not sure how to do this.

Can anyway offer assistance please?

Thanks in advance,


  harristweed 14:32 26 Jul 06

use css to make the check area always 25% of the screen.

<style type="text/css" media="screen">
#check {
height: 42px;
width: 25%;
<div id="check"></div>

here's the result

click here

  Newuser3443 17:52 26 Jul 06


Thanks for your help. Sorry, it's my fault for not making myself clear. I mean't a vertical column of checkers positioned approx. 1/4 way across the webpage but running all the way down it.


  ade.h 18:39 26 Jul 06

How big do you intend your page to be?
Is it left aligned or in a table?

If it is in a table layout, you can use your chequer image as the background in one column. If you're using a fix layout or other form of layout, make gif comprising a white strip as wide or wider than any likely screen resolution and place the chequer in that strip. If you make it wide enough, it will be prevented from repeating horizontally and will only repeat vertically.

  ade.h 18:48 26 Jul 06

Like this? click here

  Newuser3443 19:01 26 Jul 06

Exactly like that ade. I was hoping not to have to use javascript though.

I had looked at using a table and applying the gif to one column but it seems to generate an awful lot of code just to so that. I was trying to find a more elegant solution.

Thanks, Rob

  ade.h 19:24 26 Jul 06

No javascript involved. Check the page source and you'll see what I mean.

This thread is now locked and can not be replied to.

Sniper Elite 4 review: Headshotting Nazis has never felt so good

1995-2015: How technology has changed the world in 20 years

The Best Design, Illustration, Animation and VFX Awards of 2017

WWDC 2017 dates: How to get WWDC 2017 tickets, when is WWDC 2017 and more details announced