Question

I have the following code:

html:

<div id="footer-container">
    last line in page
</div>

css:

#footer-container {
    margin-bottom:800px; // needs improvement
}

The idea is to allow users see the background image completely. It works. But 800px can be shorter or longer depending of user’s window’s dimensions.

Is it possible gives to margin-bottom the window’s current height value, without javascript?

Answer 1

No. JavaScript is the only way to access the rendered dimensions of an element. However, background images can be scaled in modern browsers:

https://developer.mozilla.org/en-US/docs/CSS/background-size