Фоновое изображение за секцией заголовка с сеткой CSS - PullRequest
Новая
       33

Фоновое изображение за секцией заголовка с сеткой CSS

0 голосов
/ 16 мая 2018

Я пытаюсь воссоздать этот шаблон с помощью Grid.Я не могу понять, как создать фоновое изображение за тем, что я уже создал в моей разметке.Изображение, что я после refrence image какие-либо советы?

проверьте мой веб-сайт , что я уже сделал, я думал использовать z-indexing, но это не такне работает .. также, если я применю его к телу, он будет растягиваться с дополнительным контентом после раздела заголовка.

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif, arial;
}

a{
  color: black;
}

body{
background-color: red;
margin: 0 auto;
width: 80%;
}

/* .background-image{
  background-image: url(../img/bgheader.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  grid-column: 1 / -1;
  grid-row: 1 / 4;
} */

#grid-container{
  display: grid;
  grid-template-columns: repeat(12,1fr);
  grid-gap: 1rem;
}

header{
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: 1fr 11fr;
  grid-template-rows: 1fr 10fr 1fr 4fr;
  margin-top: 5rem;
}

header ul{
  display: flex;
  justify-content: flex-end;
}

header ul li:nth-child(-n+3){
  margin-right: 3rem;
}

header ul a{
  text-transform: uppercase;
  font-weight: 400;
  color: white;
}

header a:hover{
color: grey;
}

.slogan{
 grid-row: 2 / 3;
 grid-column: 1 / 3;
 justify-self: center;
 align-self: center;
 text-align: center;
}

.slogan h1{
  font-size: 2.5rem;
  color: white;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.more{
  color: white;
}

.services{
  color: #4a4747;
  grid-row: 4 / 5;
  grid-column: 1 / 3;
  justify-self: center;
  align-self: center;
  text-align: center;
  padding: 0 20rem;
}

.services h2{
  margin-bottom: 1rem;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
  <title>Brackets Junior</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>

<body>

  <div id="grid-container">

    <!-- Header Section -->
      <header>
        <a href="#"><img class="logo" src="img/logo.png" alt="logo"></a>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
        </nav>

        <div class="slogan">
        <h1>Always a step ahead go pro</h1>
        <a href="#" class="more">Learn more..</a>
        </div>

        <div class="services">
          <h2> We provide the best services</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia voluptatum blanditiis expedita ducimus fugit rem, qui repellat, quos totam ipsa reprehenderit eum laboriosam maiores. Eum fugit provident error velit soluta, praesentium enim dolorum architecto, quis quisquam magnam! Sequi voluptas consequatur dolor asperiores rem eaque voluptatem necessitatibus laborum alias, omnis atque.</p>
        </div>
      </header>



    </div>

</body>

</html>

Ответы [ 2 ]

0 голосов
/ 27 сентября 2018

написать текст в заголовке или компонентах li, а затем применить минимальное заполнение 400px или верхнее и нижнее заполнение 200px.это решит вашу проблему

0 голосов
/ 16 мая 2018

Просто примените свой фон к заголовку. 

header{
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: 1fr 11fr;
  grid-template-rows: 1fr 10fr 1fr 4fr;
  margin-top: 5rem;
  background-image: url(../img/bgheader.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

Я не уверен, почему ваш заголовок содержит содержимое вашей страницы или почему вы размещаете сетку заголовков внутри сетки страниц.Эти вещи могут быть пересмотрены.

...