I have this background image which must be slided in a way that it is repeated by y in order to follow the page's height.

The problem is I can't figure how...

2 answers

o.k.w 2355
0
points

Typical method is to slice off the top and bottom edge, and repeat the middle section in vertically.

For your case of a hand-drawn vertical edges, it's rather tricky as you need to slice it such that the middle section can be tiled vertically without looking disjointed. In other words, you need to find 2 horizontal slice lines which match top-down smoothly.

Answered over 6 years ago by o.k.w
  • If I slice it into two pieces...The one only the vertical top line and the other a really big image say 1500px and place it with background-position:bottom? chchrist over 6 years ago
  • @chchrist, if the page is of fixed height, perhaps it will work. o.k.w over 6 years ago
  • @chchrist Sure, just make sure your pages never exceed the maximum height. But you'll still have problems if the borders don't match. Alan Plum over 6 years ago
0
points

http://www.css3.info/preview/border-image/

Answered over 6 years ago by Nathan Duran
  • Theoretically, yes, this is the correct answer. Practically, it creates the same problem as the 2-slice / 3-slice approach above (but even worse because there's now eight slices to take into account) and adds backward-incompatibility as well. This may be an option if progressive enhancement is okay, though. Alan Plum over 6 years ago