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%
}