没有显示在倒栽跳水的背景图象

时间:2022-09-01 09:36:56

CSS Background image not showing. heres my stylus file for the heading section:

CSS背景图片没有显示。继承我标题部分的手写笔文件:

.header {
  height 50vh
  border-bottom 5px solid #34495E
  background url(img/head.png) no-repeat center center fixed
  background-size cover
}
.nav {
  display flex
  align-items center
  justify-content flex-end
  padding 1em
  background rgba(0,0,0,0.5)
  position fixed
  top 0
  left 0
  width 100%
  z-index 5
}
.nav-item {
  list-style none
  display inline
  padding 1em
}
a {
  text-decoration none
  color #ececec
  transition 1s
  padding-right 1em
}
a:hover {
  color darken(#ececec, 25%)
  text-decoration underline
}
.space {
  content " "
  height 3.0625em
}

This is what it looks like: 没有显示在倒栽跳水的背景图象

这就是它的样子:

This is the image that is supose to be the background for the header(The white section with Darcey Mckelvey in it):

这是作为标题背景的图像(其中包含Darcey Mckelvey的白色部分):

没有显示在倒栽跳水的背景图象

2 个解决方案

#1


Remove the height for the header class.

删除标题类的高度。

   .header {
   border-bottom: 5px solid #34495E;
   background: url('img/head.png') no-repeat center center fixed;
   background-size: cover;
   }

#2


Have you try putting a width into your .header? say:

你试过在你的.header中放一个宽度吗?说:

.header{
    width:100%
}

#1


Remove the height for the header class.

删除标题类的高度。

   .header {
   border-bottom: 5px solid #34495E;
   background: url('img/head.png') no-repeat center center fixed;
   background-size: cover;
   }

#2


Have you try putting a width into your .header? say:

你试过在你的.header中放一个宽度吗?说:

.header{
    width:100%
}