cssにて背景画像の上に画像を表示させたい

cssにて背景画像の上にロゴ画像を表示させたいのですが、現状背景画像が表示されるだけでロゴは表示されていない状態です。
背景画像、ロゴをそれぞれdivでくくっています。

背景画像の上にロゴを表示させるためにはどうしたらよろしいでしょうか？

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <title>Page Title</title>
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
9    <script src="./js/jquery-3.3.1.js"></script>
10    
11    <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
12    <link rel="stylesheet" type="text/css" href="./css/html5reset-1.6.1.css">
13    <link rel="stylesheet" type="text/css" href="./css/top.css">
14    
15    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
16</head>
17
18<body>
19        <div id="sign"></div>
20    <div id="back">
21        
22    <div id="top">
23        <menu>
24            <ul>
25                <li><a href="profile.html">PROFILE</a></li>
26                <li><a href="#">WEB</a></li>
27                <li><a href="#">IDENTITY</a></li>
28                <li><a href="#">CONTACT</a></li>
29            </ul>
30            
31        </menu>
32    <span id="top-text">Name</span>
33    <span id="top-text-bottom">Portfolio.</span>
34    </div>
35    </div>
36
37    <script src="./js/top.js"></script>
38</body>
39</html>

css
1body{
2    font-family: 'Montserrat', sans-serif;
3    font-weight: lighter;
4}
5#sign{
6    background-image: url(../image/sign_trans.png);
7    background-size: 50px;
8    /* position: absolute;
9    top: 40%;
10    left: 30%; */
11    background-repeat: no-repeat;
12}
13#back{
14    background-image: url(../image/top4.jpg);
15    height: 100vh;
16    background-size: cover;
17}
18#back{
19width: 100%;
20position: relative;
21}
22#top img{
23    width: 100%;
24    height: 100vh;
25    object-fit: cover;
26}
27/* #logo{
28    position: absolute;
29    top: 33.5%;
30    left: 21%;
31}
32#logo img{
33    width: 100px;
34} */
35#top-text{
36    color: #F2F2F2;
37    font-size: 3.8em;
38    position: absolute;
39    top: 25%;
40    left:15%;    
41}
42
43#top-text {
44    font-weight: bold;
45    animation-name: fadein;
46    animation-duration: 2s;
47    
48}
49@keyframes fadein{
50from {
51    opacity: 0;
52    transform: translateX(-30px);
53}
54to {
55    opacity: 1;
56    transform: translateX(0);
57}
58}
59#top-text-bottom{
60   color: #F2F2F2;
61    font-size: 1.8em;
62    position: absolute;
63    top: 33.5%;
64    left: 23.5%;
65}
66#top-text-bottom {
67    font-weight: bold;
68    animation-name: fadein-bottom;
69    animation-duration: 3s;
70    
71}
72@keyframes fadein-bottom{
73from {
74    opacity: 0;
75    transform: translateX(30px);
76}
77to {
78    opacity: 1;
79    transform: translateX(0);
80}
81}
82menu{
83    width: 40%;
84    height: 50%;
85}
86ul{
87    position: absolute;
88    top: 69.5%;
89    left: 5%;
90}
91li{
92    line-height: 30px;
93    width: 10%;
94    color: white;
95    padding: 10px;
96    text-align: -webkit-match-parent;
97
98}
99li a{
100    text-decoration: none;
101    list-style: none;
102    color: white;
103    position: relative;
104    display: inline-block;
105    transition: .3s;
106}
107  a::after {
108    position: absolute;
109    bottom: 4.6px;
110    left: 0;
111    content: '';
112    width: 0;
113    height: 1px;
114    background-color: white;
115    transition: .3s;
116  }
117  a:hover::after {
118    width: 100%;
119  }
120