CODEWITHSUNDEEP
html
DSMK Swab
DSMK Swab

Reputation: 181

Full Background image in HTML is zooming in too much

No matter what tutorial I follow, my image is always being zoomed in too much when I try to set my image into full background.

Below is my code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <style>
            #bg {
                position: fixed; 
                top: 0; 
                left: 0; 

                /* Preserve aspet ratio */
                min-width: 100%;
                min-height: 100%;
                }
        </style>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <img src="https://i.imgur.com/52dLf1W.jpg" id="bg" alt="">
    </body>
</html>

What am I doing wrong here?

Upvotes: 0

Views: 84

Answers (1)

Real Quick
Real Quick

Reputation: 2800

Use these for your image styles

width: 100%;
height: 100%;
object-fit: cover;


<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <style>
    #bg {
      position: fixed;
      top: 0;
      left: 0;
      /* Preserve aspet ratio */
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <img src="https://i.imgur.com/52dLf1W.jpg" id="bg" alt="">
</body>

</html>

Upvotes: 2

Related Questions