Изображение-фон под блоком контента
Николай Луценко

Прежде чем изменять что-то на сайте я пишу маленький файл, который примерно передает контекст сайта и суть нововведения, поэтому не удивляйтесь, что сайт выглядит так абстракно.
Есть блок header, page-background, в котором находиться блок content, в котором уже сам контент, и блок footer.
Мне нужно, чтобы фон был отдельно от header и footer, а в самом блоке с фоном был отдельный блок с белым фоном, в котором контент.
Чтобы текст в белом блоке - content был читабелен, я сделал отступ белого блока со всех сторон с помощью margin. Но фон виден только справа и слева, а сверху и снизу не виден, хотя margin есть.
Мне нужно, чтобы размер фона был динамическим, поэтому width и height использовать нельзя.
Как сделать, чтобы сверху и снизу у белого блока content там, где margin, фон был виден тоже?

Вот код:

<head>
<meta charset="utf-8">
<style>
.page-background {
/* background-color: #33ccff; */
background: url('/Users/NikolaiLucenko/Yandex.Disk.localized/Документы/Avto-tehcenter.ru/Tesla Roadster.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
}
.spacer {
height: 100px;
font-size: 50px;
}
.content {
background: #fff;
min-height: 120px;
border-radius: 10px;
padding: 10px;
border-collapse: collapse;
margin: 50px;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="spacer">
<h1>Header</h1>
</div>
<div class="page-background">
<div class="content">
<h1>Автомобиль</h1>
<p>Автомоби́ль (от др.-греч. αὐτο — сам и лат. mobilis — движущийся), автотранспортное средство, в совокупности автотехника, автотранспорт — моторное безрельсовое дорожное транспортное средство.
Основное функциональное назначение автомобиля заключается в совершении транспортной работы. Автомобильный транспорт в индустриально развитых странах занимает ведущее место по сравнению с другими видами транспорта по объёму перевозок пассажиров и грузов.
Современный автомобиль состоит из 15—20 тысяч деталей, из которых 150—300 являются наиболее важными и требующих наибольших затрат в эксплуатации.
Понятие включает легковой автомобиль, грузовой автомобиль, автобус, троллейбус, бронетранспортёр, но не включает сельскохозяйственный трактор и мотоцикл.
</p>
</div>
</div>
<div class="spacer">
<h1>Footer</h1>
</div>
</body>

Ссылка на скриншот:

https://yadi.sk/i/zsQDSTU3uyDjh

1 чел.