Search code examples
htmlcssbackgroundscale

HTML/CSS Background image scale to 100%

I have a large image that I want to set as the background for a 404 page. I want the image to be 100% wide every time someone loads the page, so that if their screen is smaller the image becomes smaller, if the screen is bigger, the image stretches. The height should change based on the width, it doesn't need to be the height of the page.

I don't have the code for this. Would it be better to do it in the HTML file or the CSS file?

Can you possible create a JSfiddle that could serve as an example? Thanks!

Solution

  • Just add this to your CSS code...

    body {
    background-image:url('http://imageshack.com/scaled/large/268/gjb.png');
    background-size:100%,100%;
}

    And then create a body...

    <body>
<a href="http://dummycode.com">Dummy Code</a>
</body>

    jsFiddle