The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Seamless background with repeat-y?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #32289

    Hi, I’ve got a blog estructured like this:


    | A |

    | B |

    | C |

    Where A and C contain static background images (header & footer) and B is a repeatable background. Problem is the union of the 3 sections was supposed to look like a seamless image, but as you may imagine it doesn’t work right now due to the bottom part of B occasionally being cut by C (depending on the length of the post, of course). Is there any way to make sure that every instance of the repeated background is always fully displayed?

    Chris Coyier

    min-height on B?


    Would only work without repeats. I would need some kind of code that sets up a min-height equivalent to the full vertical size of the image and multipliers.


    I may have explained myself incorrectly because that page suffers exactly from the same problem. If you take a look at it, the last b-repeat is cut in half, which is what I’ve been trying to avoid

    This is the blog:

    (As of now I’m using a kinda crappy background in the middle, not the one I want to use)


    If your bg img for section B is something like 100px in height you might be able to set a min-height of 100px for B then use js to force section B to increase only by increments of 100 every time content starts to increase the height of the section, I wouldn’t be able to say for sure if this is possible though.


    Does anybody know the js for something like that?

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.