Filter (Advanced Search)
    Downloads
    1         Views
    291
    Video

    Background Stretch | Images

    HTML Watch on YouTube
    Details

    If you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100%:

    Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.

    <style>
    body {
      background-image: url('cat.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 100% 100%;
    }
    </style>

    <!DOCTYPE html>
    <html>
    <head>
    <title>Background Stretch</title>
    </head>
    <body>

    <h2>Background Stretch</h2>

    <p>Set the background-size property to "100% 100%" and the background image will be stretched to cover the entire element, in this case the body element.</p>

    </body>
    </html>

    Ad