Can I avoid using Javascript to achieve this background effect?

Question

I have two images: A (700x1500px) and B (700x100px) . I set A as the background image for my page. I would like B to also be some kind of background image, but it draws the top of A.

B cannot be placed at Y <300px per page, so if you are at the top of the page, B may not appear at all on the screen. However, if you are on Y> = 300px per page, B will appear and be closed at the bottom of the browser window. Here is an illustration: the blue box is A , and the red box is B , the green line shows the 300px sign.

This can be accomplished using Javascript, but can it be accomplished using CSS and regular HTML markup?

Answer 1

If I understand you correctly, and your page has a minimum height of 300 pixels, you can use one of the many sticky CSS footer methods for this effect.

So: http://cleanstickyfooter.herokuapp.com/
or: http://www.cssstickyfooter.com/
or: http://mystrd.at/modern-clean-css-sticky-footer/

OR , for a strictly background image whose text will flow:

Have you tried using a fixed div position for a floating image? Give it a height of 100%, a minimum height of 300 pixels + the height of the image and set the background image for this div with its position at the bottom. something like this: http://jsfiddle.net/s_Oaten/JZhsw/

 #fixedBG { position: fixed; z-index: -1; height: 100%; min-height: 350px; width: 100%; background: #eee; background: url(path_to_image) bottom left repeat-x; }