0

I want the background-image in the "main" div to fit into the flexbox, without changing the picture aspect ratio.

This is what I wrote in HTML/CSS:

.main {
  display: flex;
  width: 100%;
  height: 853px;
  object-fit: cover;
  object-position: 50% 50%;
  justify-content: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Startseite</title>
  <link href="index.css" type="text/css" rel="stylesheet">
</head>

<body>

  <div class="main" style="background-image:url('titelbild.jpg')">
    <div class="titel">
      <h1>Engelberg Titlis</h1>
    </div>
  </div>

</body>

</html>

The size of the picture doesn't change when I write this. It just shows an image section, the size of the flexbox

I tried all the different object-fit functions (cover, contain, etc.). I also tried the same thing while applying a class to the image itself.

neither worked

Laaouatni Anas
  • 4,199
  • 2
  • 7
  • 26
Lehe
  • 1
  • 2
  • maybe use `background-size` property with `cover` as a value https://www.smashingmagazine.com/2021/10/object-fit-background-size-css/ – Laaouatni Anas Jan 12 '23 at 21:20

1 Answers1

0
.main {
  display: flex;
  width: 100%;
  height: 853px;
  background-image: url('titelbild.jpg');
  background-size: cover;
  background-position: 50% 50%;
  justify-content: center;
}

Also, You need to add background-repeat: no-repeat; to the class in order to remove the repeat of the background-image.

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Mask Well
  • 16
  • 2