我正在尝试制作全屏背景图片。我可以这样做，但问题是我无法保留顶部/导航栏。
这是一个模板，但我做了很多不同的事情。
我对 HTML/CSS 很陌生，所以请多多包涵。我该如何继续前进？
PS:图像现在填满了整个屏幕，但它下面有一个导航栏 - 还有一个标题图像( Logo )
这是我的 HTML 代码:
<html>
<head>
<title>Adem Ökmen Photography</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
<!-- Top Background Image Wrapper -->
<div class="bgded2" style="background-image:url('../images/demo/backgrounds/adem%20black.png');">
<header id="header" class="hoc clear">
<div id="logo">
<h1><i class="fa" > </i> <a href="../index.html"></a></h1>
</div>
<!--navi bar-->
<nav id="mainav" class="fl_left">
<ul class="clear">
<!--"Hjem" tab-->
<li><a href="../index.html">Hjem</a></li>
<!--Galleri tab-->
<li class="active"><a class="drop" href="gallery.html">Galleri</a>
<ul>
<!--"#" er link ... drop down-->
<li><a href="gallery.html">Udvalgte</a></li>
<li><a href="wedding.html">Bryllup</a></li>
<li><a href="portrait.html">Portræt</a></li>
<li><a href="outside.html">Udendørs</a></li>
</ul>
</li>
<li><a href="contact.html">Kontakt</a></li>
<li><a href="partyPrice.html">Festfotografering priser </a></li>
<li><a href="portrait1.html">Portrætfotografering priser</a></li>
<li><a href="printPrice.html">Priser på billedprint</a></li>
</ul>
</nav>
</header>
</div>
</div>
<header id="imageFull" class="hoc clear">
<!--navi bar -->
<nav id="mainav2" class="fl_left">
<ul class="clear">
<div id="bg">
<img src="../images/demo/gallery/Amnah-2.jpg">
</div>
</ul>
</nav>
</header>
<!-- JAVASCRIPTS -->
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.backtotop.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<!-- IE9 Placeholder Support -->
<script src="layout/scripts/jquery.placeholder.min.js"></script>
<!--/ IE9 Placeholder Support -->
</body>
</html>
这是我的 CSS 的一部分，请在此处输入代码；
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
最佳答案
首先，您的背景需要位于正文或导航上方的某个元素上。 其次 - 尽量不要使用固定在背景图像上的位置(使用 background-attachment:fixed)
所以你可以这样做:
body{
background: silver url(...) no-repeat;/*remove silver and fill the proper url*/
background-size: cover;
background-attachment: fixed;
}
header{
background-color: red;
padding: 10px;
width: 200px;
height: 200px;
}
nav{
background-color: blue;
padding: 10px;
width: 180px;
height: 10px;
}<body>
<header>
<nav>
Some navigation here...
</nav>
Header section here....
</header>
body section here....
</body>使用 background-attachment: fixed 当你滚动时，背景图像将保持静态，只有内容会滚动。
关于html - 全屏图像 - 但保留导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35408712/