Как сверстать адаптивный блок с background?

Question

[Kuper132]

Как сверстать такие блоки адаптивно? пробовал верстать блоки с background не хотят адаптироваться под екран. Что посоветуете?Ниже блоки которые с background сверстал

Answer 1

[gleendo]

Demo

Comments

[Kuper132]

У меня ситуация другая https://codepen.io/anon/pen/BwddXV

[Kuper132]

фишка в том что работает все только в пикселях

[gleendo]

Kuper132, ну естественно у вас будет другая ситуация. Вы изменили верстку, а стили оставили такие же.
Вы почитайте про основы то хоть...
https://codepen.io/iamevg/pen/ZXJXpY

[Kuper132]

iamevg_, Но без media запросов все таки необойтись

[Kuper132]

iamevg_, А можешь скинуть еще раз пример? а то етот ты удалил я вижу)

[gleendo]

Kuper132,

body, html
  height 100%
  
.wrapper
  display flex
  flex-direction column
  height 100%
  justify-content center
  
.rock
  display flex
  width 100%
  
.block
  background dodgerblue
  border-radius 15px
  margin 20px
  min-height 300px;
  width 50%

Answer 2

[vladimir_html]

background-image: url('photo.jpg');
background-size: cover;