How do you tile background-image bottom-up?

[smithaa02]

Whenever you tile a background image it goes top down. Is it possible to tile a image bottom-up instead?

[Xapti]

I am taking a guess saying you should try background-position property, and still include the repeat-y of course.

[Setek]

I don’t quite get this: if the background is being repeated whether vertically or horizontally, does it matter if it is top to bottom or bottom to top, left to right or right to left?

Either way it will fill the entire space it is set to fill…

In any event, I don’t remember seeing a property that can do this:

• background-color: #000-#fff ¦ color-words;

  
  

• background-image: url('/images/image.png');

  
  

• background-repeat: no-repeat ¦ repeat ¦ repeat-x ¦ repeat-y;

  
  

• background-position: 0-100% ¦ top ¦ right ¦ bottom ¦ left;

  
  

• background-attachment: fixed ¦ scroll ¦ inherit;

  
  

By the way, Xapti,

background-position

is to position where the image is, such as in the

right top

corner, etcetera.

[smithaa02]

Say you have a container 120 pixels high. If you tile a 50 pixel image, this 50 pixel image will be chopped at 20 pixels at the bottom of the container. This is a problem if have a layout that starts at the bottom of the website.

Say your template has a horizon at the bottom with snow falling to the ground. So one fixed position image will be the snowy ground with a little bit of sky and snow on it. I don't know how high all my pages will be, so the rest of the snow will be in a repeatable tile. This only works if the snow tile starts bottom up. If I start the snow tile top down, the tile will be split and not mesh with the ground correctly.

Any ideas on how to make this work?

[Setek]

Hmm… you could try what Xapti suggested, using

repeat-y

alongside

background-position

, like this:

background: url('image.png') repeat-y left bottom;

… but I wouldn’t be able to tell you whether that does anything, or how well it might work cross-browser, sorry. Perhaps give it a go and test it out?

[smithaa02]

Minus the quotes for the URL, that did the trick!