Адаптивное фоновое изображение в контейнере начальной загрузки

Question

Я использую несколько контейнеров, чтобы в них могло быть уникальное прозрачное изображение.

Я хочу, чтобы фоновое изображение в них было отзывчивым и сохраняло соотношение, я нашел много предложений, чтобы добавить background-size: cover;, но у меня это не работает. Я не могу заставить изображение реагировать.

что я пробовал:

  object-fit: contain;    
  -webkit-background-size: cover;     
  -moz-background-size: cover;    
  -o-background-size: cover;    
  background-size: cover;            
  flex: 1;     

Код CSS:

 .container{
  display: block;
  position: relative;
}

 .container1::after {
  content: "";
  background: url(bg2.jpg);
  background-repeat:no-repeat;
  background-position: center center;
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1; 
  object-fit: contain;  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  flex: 1; 
}

HTML:

<div class="container container1">
<p> some text </p>
</div>

Answer 1

Если вы хотите масштабировать одно и то же изображение в зависимости от размера окна браузера, то вот код.

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Не задавайте ширину, высоту или поля.