Hallo zusammen,
ich möchte bei einer Website ein Hintergrundbild in den header einfügen. Ich hab schon alles mögliche ausprobiert, aber das Foto wird nicht in voller Höhe hinter dem Logo und der Navigation angezeigt. Irgend etwas mache ich falsch. Könnt ihr mir helfen?
Code: HTML
<header>
<div class="logo">
<div class="logo1">
<img src="header/DVW_SHC_rgb_neu.jpg" alt="">
</div>
<div class="logo2">
<h1>Hier kommt ein Text</h1>
<p></p>
</div>
</div>
<!--<div class="banner">
<section class="flex-item">
<img src="header/DVW_SHC_rgb_neu.jpg" alt="">
</section>
<section>
<h1>Hier kommt ein Text</h1>
</section>
</div>-->
<!--<img src="header/panorama2.jpg" alt="banner" title="banner" width="1600" height="493" style="border: 0px;" />
<img src="header/panorama1.jpg" alt="banner" title="banner" />-->
<nav id="nav">
<a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul>
<li>
<a href="index.html" class="aktiv">Home</a>
</li>
<li><a href="#">Aktuelles</a></li>
<li>
<a href="#" aria-haspopup="true">Angebote</a>
<ul>
<li><a href="/">Kinder</a></li>
<li><a href="/">Teenager</a></li>
<li><a href="/">Erwachsene</a></li>
<li><a href="/">Senioren</a></li>
</ul>
</li>
<li><a href="/">Verein</a>
<ul>
<li><a href="satzung/20150324_satzung.pdf" target="_blank">Satzung</a></li>
<li><a href="mitglied/2014_mitgliedsantrag_v2.pdf" target="_blank">Mitgliedsformular</a></li>
</ul>
</li>
<li><a href="/">Links</a></li>
<li><a href="/">Kontakt</a></li>
<li><a href="/">Impressum</a></li>
<li><a href="datenschutz.html">Datenschutz</a></li>
</ul>
</nav>
</header>
Alles anzeigen
Code: CSS
header {
background: url(bilder/sicherheitstraining/SHT_Firmentraining.jpg) no-repeat center center fixed;
background-size: cover;
color: #000000;
/*margin-top: 8%;*/
/*margin-bottom: 4%;*/
}
header p {
padding: 1%;
}
.logo {
display: flex;
flex-direction: row;
width: 95%;
margin: 0 auto;
padding: 0 30px;
background: #fff;
margin-top: 8%;
margin-bottom: 4%;
z-index: 1;
/*border-top: 0.5em solid #009618;
border-bottom: 0.188em solid #009618;
border-left: 0.188em solid #009618;
border-right: 0.188em solid #009618;*/
}
.logo1{
flex: 2;
}
.logo1 img{
width: 30%;
}
.logo2{
flex: 2;
}
.logo2 h1{
padding: 10% 15% 0 0;
font-size: 1.5em;
text-align: right;
color:#000;
}
Alles anzeigen