Как выравнять положение div поверх изображения?

Question

[adamov1987]

Пытаюсь создать свой блок для wordpress, но никак не получается, то криво то смещается. Да и знание похоже не хватает, все еще учусь. В мобильной версии blok2 должен скрыться
Изображение тоже адаптивным нужно сделать, внутрь див пробовал положить не получилось

<div class="box">
  <div class="block block_1">block # 1</div>
  <div class="block block_2">block # 2</div>
</div>
<style>
.box{
  overflow: hidden;
  width: auto;
  height: 300px;
  margin: 0 auto 10px;
  border: 1px solid #000;
  padding: 10px;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/MilfordSound.jpg/600px-MilfordSound.jpg);
}
.block {
  width: 33.3333%;
  height: 100px;
  border: 1px dotted black;
  box-sizing: border-box;
  display: inline-block;
}

.block_1 {
  float: left;
}

.block_2 {
  float: right;
}

.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
  .box:before {
    background-color: rgb(150, 150, 250);
    content: "mobile";
  }

  .block_1 {
    width: 100%;
  }

  .block_2 {
    width: 100%;
  }
}
</style>

Вот так пытаюсь делать

Comments

[WapSter]

В песочнице реализуй. Float устарели, и используются в основном для создания эффекта обтекания текста.

[adamov1987]

WapSter, что такое песочница?

[WapSter]

adamov1987, https://codepen.io/

[Steppp]

что такое float?

Answer 1

[kryamk]

Дык display: none; в помощь
А так конечно я не понял, что конкретно нужно сделать

Comments

[adamov1987]

результат рисунком показал, то что хочу получить

[kryamk]

Вот что я наляпал

[adamov1987]

kryamk, спасибо большое, изображение можно как нибудь адаптировать?

[kryamk]

background-size: cover;
background-position: center;
Или выбрать другие варианты:
background-size
background-position