absoluteを使わずメニュー下にメインの画像を配置する方法について

前提・実現したいこと

ruby on rails　初心者でwebアプリケーションを作成しています。
CSSでメインのbackgroundにimageを配置しているのですが
ヘッダーメニューを分けずにまたposition:absoluteを使わずimageを配置したいです。（画像が繋がってるように）
以下のサイトのようにしたいです。
https://camps.winshape.org/
（上記のサイトでは動画が用いられてますが、私は画像です。）
absoluteを用いて行うことはできたのですが、main下に配置したいcontentsがpositionの位置調整でなければできない為、それを用いずに行うことが理想です。

該当のソースコード

html
1<section class="main top-main">
2  <div class="top-main-content">
3    <div class="top-message">
4      <h2>テスト</h2>
5      <p>テストです</p>
6    </div>
7    <div class="btn-top">
8      <a class="btn-new" href="/">新規作成</a>
9      <a class="btn-login "href="/">ログイン</a>
10    </div>
11  </div>
12</section>
13<section class="top-contents">
14  <div class="conteiner">
15    <h2>機能</h2>
16  </div>
17  <p>テスト１</p>
18  <p>テスト２</p>
19  <p>テスト３</p>
20  <p>テスト４</p>
21</section>
22

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>testAPP</title>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7
8    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
10  </head>
11
12  <body>
13    <header>
14      <div class="header-logo">
15        <%= link_to image_tag("/minhari_touka.png", :size => '240x54',:action => "index") %>
16      </div>
17      <nav class="header-menus">
18        <ul>
19          <li><a href="/">ブログ</a>
20          <li><a href="/menu">メニュー</a>
21          <li><a href="/about/"> 店舗情報</a>
22          <li><a href="/contact/">お問い合わせ</a>
23        </ul>
24      </nav>
25    </header>
26    <%= yield %>
27  </body>
28</html>
29

css
1.main {
2  position: absolute;
3  top: 64px;
4  width: 100%;
5  height: auto;
6  min-height: 100%;
7  background-color: #f5f8fa;
8}
9
10body{
11  margin: 8px 0px;
12}
13
14/* header ================================ */
15header {
16  position: absolute;
17  height: 64px;
18  z-index: 1;
19  width: 100%;
20}
21
22ul, li {
23  list-style-type: none;
24  padding: 0;
25  margin: 0;
26}
27
28a {
29  text-decoration: none;
30  color: #2d3133;
31  font-size: 14px;
32}
33
34.header-logo {
35  float: left;
36  padding-left: 20px;
37  color: white;
38  font-size: 22px;
39  line-height: 64px;
40}
41
42.header-menus {
43  float: right;
44  padding-right: 20px;
45}
46
47.header-menus li {
48  float: left;
49  font-size: 13px;
50  color: white;
51  padding: 5px 10px;
52}
53
54.header-menus a {
55  float: left;
56  font-size: 15px;
57  color: black;
58  padding: 6px 8px;
59  border: 3px solid #00000000;
60  border-radius: 4px;
61}
62
63.header-menus li a:hover {
64  background-color: #ffffff7a;
65  border-radius: 4px;
66}
67
68/* top ================================ */
69.top-main {
70  position: absolute;
71  padding: 200px 0 100px;
72  text-align: center;
73  top: 0;
74  width: 100%;
75  height: auto;
76  min-height: 64%;
77  color: black;
78  background-color: #3ecdc6;
79  background-repeat: no-repeat;
80  background-position: center 50%;
81  background-size: cover;
82  background-image: url("/top.jpg");
83}
84
85.top-main-content{
86  margin: 0 auto;
87  width: 800px;
88  height: 300px;
89  background: #dadada;
90  display: block;
91  filter:alpha(opacity=50);
92  -moz-opacity: 0.5;
93  opacity: 0.5;
94}
95
96.top-message {
97  position: relative;
98}
99
100.top-main h2 {
101  padding-top: 40px;
102  font-size: 50px;
103  font-weight: bold;
104  line-height: 1.3;
105  -webkit-font-smoothing: antialiased;
106  margin-bottom: 20px;
107}
108
109.top-main p {
110  font-size: 24px;
111}
112
113.btn-top{
114  margin-top: 50px;
115}
116
117.btn-new,.btn-login{
118  margin: 15px;
119  border: 3px solid black;
120  border-radius: 4px;
121  background-color: transparent;
122  color: black;
123  font-size: 20px;
124  padding: 18px 20px;
125  -webkit-transition: all 0.3s
126}
127
128.btn-new:hover,.btn-login:hover{
129  background-color: black;
130  color: white;
131}
132
133
134/* top-contents ================================ */
135.top-contents{
136  position: absolute;
137  top: 850px;
138}