如何用背景图像完全覆盖标题?

问题描述 投票:0回答:1

如何删除标题和页面顶部之间以及标题和菜单之间的空白区域。 +如何使标题的背景图片完全可见?由于我的学习,我无法使用“div”标签。 这是我的HTML代码:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Startpagina</title>
    <link rel="stylesheet" href="css/algemeen.css">
</head>
<body>

<header class="hoofdfoto">
    <h1>MoveIt</h1>
</header>

<nav>
    <ul id="menu">
        <li><a href="html/aanvraag_offerte.html"><img src="images/offerte.png" alt="Aanvraag offerte"></a></li>
        <li><a href="html/verhuur.html"><img src="images/verhuur.png" alt="Verhuur"></a></li>
        <li><a href="html/stappenplan_verhuis.html"><img src="images/stappenplan.png" alt="Stappenplan Verhuis"></a>
        </li>
        <li><a href="html/geschiedenis.html"><img src="images/geschiedenis.png" alt="Geschiedenis"></a></li>
        <li><a href="html/contact.html"><img src="images/contact.png" alt="Contact"></a></li>
    </ul>
</nav>

</body>
</html>

这是我的css代码:

body {
    margin: 0;
    background-color: slategray;

}

h1 {
    text-align: center;
    font-size: 50px;
}

.hoofdfoto {
    background: url("../images/header.jpg") center no-repeat;
    background-size: cover;
}

#menu {
    list-style: none;
    padding: 0;
    background-color: gray;
    width: 100%;
}
#menu li{
    display: inline;

}
#menu li:hover{
    background-color: darkgray;
}
#menu li a {
    text-decoration: none;
}
#menu li a img{
    height: 50px;
    width: 50px;
    padding: 0 8%;
}
html css
1个回答
0
投票

你需要删除你的h1标签margin

body {
    margin: 0;
    background-color: slategray;

}

h1 {
    text-align: center;
    font-size: 50px;
    margin:0px;      /*Add this in your css*/
}

.hoofdfoto {
    background: url("https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg") center no-repeat;
    background-size: cover;
}

#menu {
    list-style: none;
    padding: 0;
    background-color: gray;
    width: 100%;
}
#menu li{
    display: inline;

}
#menu li:hover{
    background-color: darkgray;
}
#menu li a {
    text-decoration: none;
}
#menu li a img{
    height: 50px;
    width: 50px;
    padding: 0 8%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Startpagina</title>
    <link rel="stylesheet" href="css/algemeen.css">
</head>
<body>

<header class="hoofdfoto">
    <h1>MoveIt</h1>
</header>

<nav>
    <ul id="menu">
        <li><a href="html/aanvraag_offerte.html"><img src="images/offerte.png" alt="Aanvraag offerte"></a></li>
        <li><a href="html/verhuur.html"><img src="images/verhuur.png" alt="Verhuur"></a></li>
        <li><a href="html/stappenplan_verhuis.html"><img src="images/stappenplan.png" alt="Stappenplan Verhuis"></a>
        </li>
        <li><a href="html/geschiedenis.html"><img src="images/geschiedenis.png" alt="Geschiedenis"></a></li>
        <li><a href="html/contact.html"><img src="images/contact.png" alt="Contact"></a></li>
    </ul>
</nav>

</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.