Filter (Advanced Search)
    Downloads
    1         Views
    264
    Video

    Background Cover | Images

    HTML Watch on YouTube
    Details

    If you want the background image to cover the entire element, you can set the background-size property to cover.

    Also, to make sure the entire element is always covered, set the background-attachment property to fixed:

    This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):

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

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

    <h2>Background Cover</h2>

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

    </body>
    </html>

    Ad