背景图片未覆盖整个页面

Question

我正在尝试将图片放置在网站标题和其他内容的后面，但是这样做存在问题。 我尝试过将图像放置如下：

body {
  background-image:url('images/city.jpg');
  background-position: top;
  background-size: cover;
  height: 500px;
} 

但是结果在this screenshot中。

“短信制作简单”部分始终存在问题，要么图像被向下推，要么图像无法延伸到上方。

这是“ SMS ...”文本的HTML：

<h1 class="n1">
  <font face="ralewaybold">
    SMS MESSAGING MADE EASY
  </font>
</h1> 

和CSS：

.n1 { 
  display: flex; 
  justify-content: center; 
  margin-top: 10em;
}

整个页面截图：

我希望图像到达页面顶部-https://prnt.sc/qh4foe