StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS full page background scaling issues
text
Body
copied!<p>How can I make a full page background image and not have it stretched (<a href="http://naczynia.welmax.pl/kontakt" rel="nofollow noreferrer">something like this</a>)? </p> <pre><code><html> <style> html, body {height:100%;} #background { min-height:100%; min-width:1024px; width:100%; height:auto; position:fixed; top:0; left:0; z-index:-1; } @media screen and (max-width: 1024px){ #background{left:50%;margin-left:-512px;}} </style> </head> <body> <img id="background" src="http://www.iwallpapers.in/bulkupload/C/Mountains/Mountains%2040.jpg" alt="" /> </body> </html> </code></pre> <p>Pastebin <a href="http://pastebin.com/Ef5cGJMM" rel="nofollow noreferrer">here</a></p> <p><strong>EDIT:</strong></p> <p>The above code might illustrate my goal better. When you re-size the window to let's say 400px you get <a href="http://gyazo.com/45e516ae4ed2c27000e4c55381df94ea.png" rel="nofollow noreferrer">empty space under the image</a>. I want the image to fill the entire window and keep its aspect ratio. </p> <pre><code><!DOCTYPE html> <html lang="en"> <head><head> <title></title> <style> *{margin:0; padding:0;} #wrap{ width:100%; height:auto; margin:0 auto; } #bg{ width:100%} </style> </head> <body> <div id="wrap"> <img src="http://www.bmwgallery.co.uk/bmw-motorcycles/bmw-s1000rr-superbike-motorcycle-large.jpg" id="bg" /> </div> </div> </body> </html> </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