We help IT Professionals succeed at work.

checkerboard background

rgb192 asked

my homepage is the black rectangle
the background is the grey checkerboard pattern on left, top, right

how can I do this checkerboard background that fades downwards

Is there a way to do this without using a giant background jpg

Watch Question

Make a tall skinny image that is only 2 or 3 pixels wide and have it repeat. It will repeat to fill any size monitor.

I made the file that you can use. and attached it. As you can see it's only 2KB in size. All you need to do now is add the code to make it repeat in the background.

Here is a CSS example:
body { background-image: url("checkered-bg.gif");
background-repeat: repeat-y;

explanation of the css values:
repeat: The image is repeated both horizontally and vertically.
repeat-x: The image is repeated horizontally only.
repeat-y: The image is repeated vertically only.
no-repeat: The image is not repeated: only one copy of the image is drawn.

There are other ways to do it, but this is one of the best. Just make sure that the image directory is defined if you have the image in a folder.
Alternatively, since you don't need the checkerboard background for the black rectangle, you could do like that:

slim header with background

vertical div left with checkerboard background - rectangle with black background only - vertical div right with checkerboard bg

for vertical divs using dogzandbonz technique - see above.

for layout structure use one of the three column layouts (likely top example) from

hope this will help you...
just javascript... no image...



i did
background-repeat: repeat-x;

and it worked

but the can I also do
background-repeat: repeat-y;

because the image ends in the middle of the page

when i do both
background-repeat: repeat-y;
background-repeat: repeat-x;

i get no background