header 中的 HTML 横幅不显示

标签 html css

我试图在我的页眉中显示一个图像作为背景,但似乎没有任何反应。

这是我的 css 代码,我在其中设置图像的规范 (500 * 2000):

header{
background-image: url(../images/banner2.png);
background-repeat: no-repeat;
margin: 0 auto;
max-height:100px;
width: 100%;
}

这是我的 HTML 代码:

 <!DOCTYPE html>
    <html>
    <head>
    <title>Contact</title>
    <link rel="stylesheet" href="../css/main.css" />
    </head>
    <body id = "contact">
    <header></header>
    <div id="page">
    <div id="logo">
        <h1><a href="../html/index.html" id="logoLink">Baby kleding online</a></h1>
    </div>
    <div id="nav">
        <ul>
            <li><a href="../html/index.html"id="homenav">Home</a></li>
            <li><a href="../html/kleding.html"id="kledingnav">Kleding</a></li>
            <li><a class="inuse" href="../html/contact.html"id="contactnav">Contact</a>      </li>
            <li><a href="../html/vragen.html"id="vragennav">Vragen</a></li>
        </ul>
    </div>
    <div class="content">
        <h2>Contact</h2>
    </div>
    <div class="Images">
        <b target="_blank" href="kleding.htm">
            <img src="../images/logo.PNG" alt="Boy1" width="300" height="140">
        </b>
    </div>
</div>
</body>
</html>

最佳答案

为了解决您的问题,您必须为页眉指定一个高度。 这可以通过使用 height: [Amount of pixels]px; 来完成。

或者您可以在 <header></header> 之间添加一些内容使标题显示的标签。

关于 header 中的 HTML 横幅不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19727134/

相关文章:

html - 侧边栏导航不占用网站的全部高度

css - float 标签和占位符重叠

html - 上滑绝对位置

html - 如何让表格中的文字自动换行?

html - Bootstrap 图像分散像这个网站

javascript - 行的替代背景颜色

html - 为按钮使用背景图像。如何根据文本的长度调整按钮的大小?

html - Flexbox 中的 Flexbox 不适用于省略号文本溢出

html - css text-decoration 下划线在应用于输入按钮的文本时不起作用

javascript - 使页面上的所有链接都添加图像或效果