Image is not tiling

[acummins]

Hi guys

I just cannot tile the background image on the main page. The image is placed like domino boxes one on the top of the other. The code below is what I have:

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
background-image: url(../images/tile.jpg);
background-repeat: repeat-y;
color: #000000;
background-color: #e5edf5;
}

The image is a two-coloured, linear fill type rectangle box. Do I need some extra code in the CSS file or something else?

Will appreciate any help.

[kobra]

I just cannot tile the background image on the main page. The image is placed like domino boxes one on the top of the other. The code below is what I have:

No link to your site??? Can not see anything you have???

But as a guess try:

background-repeat: repeat;

[acummins]

No link to your site??? Can not see anything you have???

I have no web site yet, just working locally. I'll give it a try to see if it works.

[acummins]

Kobra,

I changed the code as you suggested. The dimensions of the image was 2(W) x 1500(H) px. It worked. However, when I decreased the dimensions to 5x300 px, it started behaving as before. I attach the screenshot so you can see how exactly it looks.

[rstevenson]

That looks exactly as I would expect it to look. The 300px high image fills across one row 300 px high, and then it steps down and fills across another row 300 px high, and so on to the height of the viewport.

What else are you trying to achieve?

Rob

[kobra]

For the tall image - repeat-x - would have been the correct style

[acummins]

What else are you trying to achieve?

OK, What I want the image to do is to start with with one colour at the top e.g. blue as you see in the thumbnail, expands all the way to the bottom and finishes with another colour e.g. yellow. Also as the page gets taller it will automatically stretch. I want to achieve this with an image with small dimensions like 2 px - 25 px. Am I wrong?

When tiling vertically, do the size important?

For the tall image - repeat-x - would have been the correct style

Are you that I can use 'repeat-x' for vertical tiling?

[rstevenson]

There are probably magicians somewhere on the web that will say I'm wrong, but I don't think you can get a browser to stratch an image like that. A background image will be the size you make it -- if you make it big enough for all possible window sizes, that will work; if you make it smaller, it will tile the way it is told to in the stylesheet.

You can achieve most fo the effect you want by doing this...

Set the background colour to the colour you want at the bottom of your image -- yellow, for example.

Make a background image which fades from purple to yellow over a reasonable distance, perhaps something like 400 pixels. You can make that image only 1 pixel wide if you want, and in the stylesheet set it to tile horizontally but not vertically. Like so...

background-color: #COLOR;  [put your bottom color in here]
background-image: url(../images/tile.jpg);
background-repeat: repeat-x;

That should give you what you want.

Rob

P.S.

There is a way to stretch a background image, but it's not supported in all browsers, and it may only work for horizontal stretching, not vertical. You can Google for it.

[kobra]

I want to achieve this with an image with small dimensions like 2 px - 25 px. Am I wrong?

As rstevenson has pointed out and I concur - You cannot Stretch the image...

What you can do is apply the gradient (a tall narrow image) about 1000-1500 px tall to the body tag and if you desire a bolder bottom color - can be attached to a new "bottom" div created outside of the mainWrapper that will span full left to right

[acummins]

I'll stick to your suggestions and create a taller image as this seems the only way. Thank both of you for giving me a hand. Appreciated.