Databases
StackOverflow2013
Postsdbo
POpositioning css background at the bottom of the window without extra markup or min-height
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POpositioning css background at the bottom of the window without extra markup or min-height
    text
    copied!<p>Is it possible to position a background image at the bottom of the window without extra elements or min-height?</p> <p>I'm trying to have an image at the bottom of the window, not the body, no matter how short the webpage is.</p> <p>What I mean is that if a page is longer than the vertical screen resolution, the browser allows you to scroll to the bottom and the image would be at the bottom (footer background).</p> <p>If the page is very short, maybe half the height of the screen, the footer background will "hang" in mid air. I'm trying to have it so it stays at the bottom of the window.</p> <p>I've tried min-height, but that requires you to set a big enough height to cover the largest resolution that people who visit your site might have in turn creating large empty areas which are still there if you resize down your browser (or if people have smaller screens).</p> <p>I tried setting the footer background onto the body element, but it hangs. Setting the footer background onto the html element just gave me a white area at the bottom, so I used it for my header background instead.</p> <p>The basic layout of my website is:</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;div id="header"&gt;other elements and header stuff&lt;/div&gt; &lt;div id="main"&gt;main content&lt;/div&gt; &lt;div id="footer"&gt;other elements and footer stuff&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload