Как сделать background на всю ширину экрана, если его родитель не полной длины

189

23 сентября 2019, 14:40

Делаю шапку для сайта. Столкнулся с проблемой: я хочу чтобы все содержимое сайта хранилось в рамках одного общего контейнера (wrapper) который размещен по по центру экрана. Но на сайте нужно сделать такие фото, которые длиной во всю ширину экрана. Получается так что этот wrapper перекрывает фото, и просто обрезает его до своего размера.

body{ 
	width: 100%; 
	margin: 0; 
	background: url("images/head-bg.jpg"); 
} 
header{ 
	background-size: 100% 1024px; 
	width: 100%; 
	height: 1024px; 
} 
.wrapper{ 
	width: 1230px; 
	margin: 0 auto; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Waxom</title> 
	<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
	<div class="wrapper">	 
		<header> 
			 
			 
		</header> 
	</div>	 
</body> 
</html>

Answer 1

Насколько я понял, вы хотите сделать аналог шаблона Waxom, который выглядит так:

И мне кажется, что суть вопроса такова:

Как сделать фон header на всю ширину экрана, а содержимое header с "ограниченным" размером, в вашем случае 1024px.

Если это так, то тут придётся "хитрить" и чутка исправить вёрстку:

Определимся с "шаблоном" вёрстки.

"Весь сайт" имеет белый фон, и только шапка имеет фон.
Основное содержимое находится в центре сайта и имеет ограничение по ширине 1024px.

(Красное - картинки, белое - основной контент, затемнение - ограничение)

Так и распишем:

body { 
  width: 100%; 
  min-height: 100vh;  
  margin: 0; 
} 
 
header { 
  display: block; 
  width: 100%; 
  min-height: 80vh; 
  /* Ну и ставим ему background */ 
  background: url('https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg?cs=srgb&dl=android-wallpaper-drops-of-water-hd-wallpaper-8633.jpg&fm=jpg') no-repeat center center / 100% auto; 
  /* или background-size: cover; */ 
  color: #fff; /* Ибо фон в примере тёмный */ 
} 
 
.content { 
  display: block; 
  width: 100%; 
  min-height: 20vh; 
} 
 
.wrapper { 
  display: block; 
  width: 50%; /* для сниппета укажу в процентах */ 
  margin: 0 auto; 
  /* Свойства ниже для визуального отображения wrapper'а, так что удалите потом */ 
  border-left: 1px solid red; 
  border-right: 1px solid red; 
  box-sizing: border-box; 
} 
/* Это тоже удалить */ 
header .wrapper { 
  height: 80vh; 
} 
 
.content .wrapper { 
  height: 20vh; 
}

<header> 
  <div class="wrapper"> 
    Тут содержимое хедера 
  </div> 
</header> 
<div class="content"> 
  <div class="wrapper"> 
    Тут содержимое контента 
  </div> 
</div>