My image is streching

1 
<html>
<head>
    <link rel="stylesheet" type="text/css" href="webpage1.css">
</head>
<body>
  <div class="top-1">
      <h1>my website</h1>
    </div>
</body>
</html>

type or paste code here

50%20PM
50%20PM2878×1798 400 KB

body {
  color:green;
  margin: 0;    
}

h1 {
  text-align: center;
  padding: 180px 20px;;
}

.top-1 {
    background-image: url(images/download.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    object-fit: cover;
}
2

Probably get rid of object-fit because that’s not how it works (it’s for applying to img/video etc elements).

But can you explain what you mean, because what you have works fine, no stretching at all. Are you sure the image is stretching, because the image in the screenshot you posted does not look like it’s stretched at all, it looks as I would expect it to look

https://codepen.io/DanielCouper/pen/ZNGERe

1 Like
3

THANK YOU :grinning::grinning::grinning::grinning::grinning::grinning::grinning:

1 Like