Resize background-image to flexbox

110 Views Asked by Lehe At 10 April 2025 at 18:54

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

Original Q&A

There are 1 best solutions below

Mask Well On 13 January 2023 at 08:40

.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.

Resize background-image to flexbox

There are 1 best solutions below

Related Questions in FLEXBOX

Related Questions in IMAGE-RESIZING

Related Questions in OBJECT-FIT

Trending Questions

Popular # Hahtags

Popular Questions