How to tile background from a mid-screen position, one direction only, to fill to bottom of window (regardless of window height)?

Question

I have a tricky CSS situation which I can't seem to solve.

I'd like the top portion of the body background to be one color (white), and then fill with another color (blue) from a certain position downward (below a footer in my case), and ensure that this color always fills (bleeds) to the bottom edge of of the browser window, regardless of window size.

I tried using a small blue bitmap, specifying the starting position via background-position , then applying background-repeat: repeat-y , but it fills in both directions.

I also thought of creating a long div but this affects the canvas size -- browser adds scroll bars, mobile will render the entire size -- no good.

Any ideas? (I'm not looking for a sticky footer) Thanks!

Answer 1

You should just add the background property in your footer instead.

Then you add some huge padding-bottom and add a negative margin-bottom of the same amount.

Just make sure you have an outter div with overflow: hidden;

FIDDLE