Задать 3 блока и стили

Question

Мне нужно задать 3 блока , их размер, background-image каждому блоку и масштаб этих картинок.

Требуется задать ширину контентной области сайта (внутреннего контейнера) 1270px. Правильно ли я понимаю, что это делается в элементе body? Что нужно указать, чтобы этот контейнер располагался посредине страницы?
Я делаю по psd макету, первый блок занимает 38%, а остальные два 30,8%. Как задать блокам эти размеры?

При добавлении background-image, размер картинки слишком велик, как его вписать в блок?

Заранее благодарю!

Answer 1

/*
 Задание 1. 
 Контейнер на 1270px по средине страницы.
*/
.container {
  width: 1270px;
  margin: 0 auto;
  display: flex;
}

/*
 Задание 3. 
 background-size: cover;
 Растянет картинку на фоне на всю ширину страницы.
*/
.container > div:first-child {
  width: 38%;
  background-image: url('https://t7-live-ahsd8.nyc3.cdn.digitaloceanspaces.com/animalhumanesociety.org/files/styles/crop_16_9_960x540/flypub/media/image/2019-06/collared%20cat%20outside.jpg?itok=Njrr22Tn');
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}

/*
 Задание 2. 
 Для всех блоков 30.8% ширины, отдельно 38% для первого.
*/
.container > div {
  width: 30.8%;
  border: solid 1px #ddd;
  height: 250px;
}

<div class="container">
  <div>1. Требуется задать ширину контентной области сайта (внутреннего контейнера) 1270px. Правильно ли я понимаю, что это делается в элементе body? Что нужно указать, чтобы этот контейнер располагался посредине страницы?</div>
  <div>2. Я делаю по psd макету, первый блок занимает 38%, а остальные два 30,8%. Как задать блокам эти размеры?</div>
  <div>3. При добавлении background-image, размер картинки слишком велик, как его вписать в блок?</div>
</div>

БЛОГ НА HUSL

Задать 3 блока и стили

Ответы (1 шт):