My goal is to create a fullscreen background image, but I'm facing an issue where I can't maintain my top/navigation bar.
I've customized the template significantly from its original design.
As I'm relatively new to HTML/CSS, I'd appreciate some guidance on how to proceed. Can anyone help me with this?
Currently, the image covers the entire screen, but there's a navigation bar and header logo underneath it.
Here's a snippet of my HTML code:
<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">
<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>
<nav id="mainav" class="fl_left">
<ul class="clear">
<li><a href="../index.html">Hjem</a></li>
<li class="active"><a class="drop" href="gallery.html">Galleri</a>
<ul>
<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>
<header id="imageFull" class="hoc clear">
<nav id="mainav2" class="fl_left">
<ul class="clear">
<div id="bg">
<img src="../images/demo/gallery/Amnah-2.jpg">
</div>
</ul>
</nav>
</header>
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.backtotop.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<script src="layout/scripts/jquery.placeholder.min.js"></script>
</body>
</html>
Below is a segment of my CSS code:
#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%;
}