Home/ Questions/Q 6217907
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T07:30:27+00:00

Is there a way to let the repeating background ‘start’ fixed at the bottom

  • 0

Is there a way to let the repeating background ‘start’ fixed at the bottom of the div and overflow on the top? (the other way round than default)

Small example to show what I’m trying to accomplish. The red lines on the image below are the (horizontal) borders between several divs. The middle div is used as a transition between the upper and lower one, with a single non-repeating image. The background of the lower div consists of a repeating darker image with a paper hole, resulting in the paper border seen below.

Now the upper div (with sizable content) should have a repeating background image starting at the bottom and repeating upwards. This for maintaining the correct distance ratio between the holes instead of ending up with a smaller distance or even a partial hole in the ‘paper border’.

background example

Preferably it should be compatible with method 4 of equal height columns, but I don’t see a problem there.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just make sure you set background-position: right bottom; to the top div, and the background image should start from the bottom and “overflow” out the top.

    Example in shorthand:

    .my-div {
    background:#fff url(my-bg.png) right bottom repeat;
}

    Some reference in case you’d like to explore this further:
    http://reference.sitepoint.com/css/background-position

    • 0