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

187

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>

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

201

MySQL

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

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

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

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

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