РЕДАКТИРОВАТЬ
Добавлен контейнер вокруг сетки, чтобы обеспечить стилизацию фона.
Просто удалите свойство height в вашем элементе .slider.Элементы .img и .text занимают оставшееся пространство, чтобы заполнить дополнительное пространство.
* {
margin: 0px;
padding: 0px;
}
html,
body,
.start {
height: 100%;
}
.header {
height: 80px;
background: blue;
}
.body-background {
height: calc(100% - 80px);
/* apply background here */
}
.slider {
background: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "text img";
}
.text {
grid-area: text;
background: green;
}
.img {
grid-area: img;
background: yellow;
}
@media screen and (max-width: 768px) {
.slider {
grid-template-areas: "text text" "img img";
}
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<div class="start">
<header class="header">
<h2>hola</h2>
</header>
<div class="body-background">
<div class="slider">
<div class="text">
<h1>titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
</div>
<div class="img">
<h1>titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dolorum deserunt, culpa aspernatur cupiditate, quos excepturi expedita consectetur doloribus fugiat amet ad, ipsum unde eaque. Atque, eius, vel! Ipsa, blanditiis.</p>
</div>
</div>
</div>
</div>
</body>
</html>