We help IT Professionals succeed at work.

checkerboard background

rgb192
rgb192 asked
on

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


homepage.jpg
Comment
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.
checkered-bg.gif
Commented:
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
http://www.dynamicdrive.com/style/layouts/category/C10/
 

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

http://www.tek-tips.com/faqs.cfm?fid=5889

Author

Commented:
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

Author

Commented:
thanks