Html 标题图像不是'；t出现

我的站点中没有出现标题图像。我尝试了clearfix，但什么都没有。我试着在图片上加上宽度和高度，但似乎什么都不起作用。请帮忙

以下是JSFIDLE链接：

HTML:

---

为了使背景图像显示添加到css下方

html,body {
    height: 100%;
}

---

为了使百分比值正常工作，您需要设置父元素高度。

您可以在同一页面中键入html和css。我已经尝试过了，它可以正常工作

<style>
*{
    box-sizing: border-box;
}

body{
    font-family:manrope;
    margin:0px;
    padding:0px
}

#header{
    background: url('hero-image.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    height:100%;
    width:100%;
}


#JJO h1{
    font-size:45px;
    font-family:Source Sans Pro;
    color:white;
    margin:0px;
}

#container{
    width:1010px;
    margin:auto;
   
    
}

#JJO{
    float:left;
}

#nav{
    
}
</style>

<div id="header">
                <div id="container">
                <div id="JJO">
                        <h1>JJO</h1>
                        <h2>Juniors make IT work.</h2>
                        <h3>Hire and invest in highly skilled juniors now.</h3>

                        <a href="">Post Offer Now</a>
                </div>
                <div id="nav">
                    <ul>
                        <li>Discounts</li>
                        <li>About Us</li>
                        <li>FAQ</li>
                        <li>Blog</li>
                    </ul>
                        <a href="">Login</a>
                </div>
            </div>
        </div>

*{
框大小：边框框；
}
身体{
字体系列：manrope；
边际：0px；
填充：0px
}
#标题{
背景：url（'hero-image.png'）；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
身高：100%；
宽度：100%；
}
#JJO h1{
字体大小：45px；
字体系列：源Sans-Pro；
颜色：白色；
边际：0px；
}
#容器{
宽度：1010px；
保证金：自动；
}
#JJO{
浮动：左；
}
#导航{
}
JJO
大三学生让它发挥作用。
现在雇佣并投资高技能的年轻人。

折扣
关于我们
常见问题
博客

添加

溢出：隐藏
标题上的

#header{
    background: url('https://i.ibb.co/SVgmsmw/hero-image.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    height:100%;
    overflow:hidden;
}

谢谢，它很有效。但我也发现，使用clearfix:clear:两者都有效。

<style>
*{
    box-sizing: border-box;
}

body{
    font-family:manrope;
    margin:0px;
    padding:0px
}

#header{
    background: url('hero-image.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    height:100%;
    width:100%;
}


#JJO h1{
    font-size:45px;
    font-family:Source Sans Pro;
    color:white;
    margin:0px;
}

#container{
    width:1010px;
    margin:auto;
   
    
}

#JJO{
    float:left;
}

#nav{
    
}
</style>

<div id="header">
                <div id="container">
                <div id="JJO">
                        <h1>JJO</h1>
                        <h2>Juniors make IT work.</h2>
                        <h3>Hire and invest in highly skilled juniors now.</h3>

                        <a href="">Post Offer Now</a>
                </div>
                <div id="nav">
                    <ul>
                        <li>Discounts</li>
                        <li>About Us</li>
                        <li>FAQ</li>
                        <li>Blog</li>
                    </ul>
                        <a href="">Login</a>
                </div>
            </div>
        </div>


#header{
    background: url('https://i.ibb.co/SVgmsmw/hero-image.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    height:100%;
    overflow:hidden;
}