Как сверстать данный кусок?

160
12 января 2018, 23:40

Добрый вечер господа, есть такая часть макета, как сверстать правильнее. Контент который по центру в wrapper'e который имеет макс ширину 1200. А вот этот background image должен тянуться до краях браузера( пример скриншота вся ширина 1920). Эти картинки и линий это один .png файл

Answer 1

Cпособ 1. Сделайте множественный background.

body { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  min-height: 100vh; 
  background-repeat: no-repeat; 
  background-image: url(http://lorempixel.com/400/100), url(http://lorempixel.com/500/200), url(http://lorempixel.com/300/300); 
  background-position: 100% 0, 0 100px, 100% 300px; 
} 
 
.container { 
  width: 100%; 
  max-width: 500px; 
  /* 1200px */ 
  min-width: 320px; 
  margin: 0 auto; 
  min-height: 100vh; 
  background-color: rgba(255, 255, 255, .9); 
  box-shadow: 0 0 10px rgba(0, 0, 0, .5); 
}
<div class="container"> 
</div>

Cпособ 2. Рассчитайте позицию изображения.

body { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  min-height: 100vh; 
} 
 
.container { 
  width: 100%; 
  max-width: 500px; /* 1200px */ 
  min-width: 320px; 
  margin: 0 auto; 
  min-height: 100vh; 
  background-color: rgba(255, 255, 255, .9); 
  box-shadow: 0 0 10px rgba(0, 0, 0, .5); 
  position: relative; 
} 
.container img { 
  position: absolute; 
  width: 50vw; 
  left: 50%; 
  z-index: -100; 
}
<div class="container"> 
  <img src="http://lorempixel.com/300/300"> 
</div>

READ ALSO
Реализация кривой с цифрами

Реализация кривой с цифрами

Как лучше сделать будет через backround-image и через абсолютное позиционирование элементов-это нормальный способ? или только canvas?

175
Ищу помощь с вложенным запросом MySQL [требует правки]

Ищу помощь с вложенным запросом MySQL [требует правки]

Нужно расположить блоки в правильной последовательности"Экспресс курс по основам SQL" с минимальным количеством примеров, поэтому возникли...

171
C# xml Как считать определенные элементы?

C# xml Как считать определенные элементы?

Здравствуйте! Не получается разобраться с проблемойИмеется xml файл вида:

239
Приложение на c# не воспроизводит Post/Sendmessage

Приложение на c# не воспроизводит Post/Sendmessage

Здравствуйте, полностью эмулирую нажатие лкм в программе, повторяю все, что есть в spy++, но программа не реагирует на кликПрограмма чистая,...

181