Flexbox - Bild als Schriftzug im Header einfügen
Ich möchte die Schrift Alien Encounters im Schriftzug des Headers haben. Diese Schrift ist aber auf vielen Systemen nicht erkennbar und mit den sicheren Schriften bin ich nicht glücklich. Wie füge ich nun ein Bild als Schriftzug im Header ein? Gäbe es noch eine andere Möglichkeit?
Der hier verwendete Code
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin:0;
padding:0;
}
body {
background-color: #4e535d;
display:flex;
flex-direction:column;
}
header {
width: 100%;
height: 212px;
background-color: #4e535d;
color: white;
text-align: center;
font-family: "Alien Encounters", "Arial Black", Verdana;
}
#oben img {
margin-top:43px;
height: 78px;
width: 51px;
border-radius:50%;
}
nav {
list-style-type: none;
background-color:#2e3545;
width:calc(100% - 10px);
}
nav li {
display: inline-block;
margin-left:-4px;
}
nav a {
display: inline-block;
color: white;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8125em;
height:100%;
width:100%;
padding:20px 16px 20px 6px;
text-decoration:none;
}
nav >ul> li:nth-child(1){
background-color: #4e535d;
border-right: 2px solid #4e535d;
width: 82px;
text-align:center;
}
nav >ul> li:nth-child(2){
background: #1e1d24;
width: 174px;
text-align: center
}
nav >ul> li:nth-child(3){
background: #1e1d24;
border-left: 2px solid #4e535d;
border-right: 2px solid #4e535d;
width: 140px;
text-align: center;
}
nav >ul> li:nth-child(4){
background: #1e1d24;
border-right: 2px solid #4e535d;
width: 106px;
text-align: center;
}
main{
display:flex;
flex-direction:row;
}
#left,#rechts{
flex:1;
background: #4e535d;
margin-right:0px;
color:white;
padding:5px;
}
#mitte{
flex:6;
display:flex;
flex-direction:column;
margin:30px 0 10px 0;
}
#mitte_eins,#mitte_zwei,#mitte_drei,#mitte_vier,#mitte_fünf,#mitte_sechs{
min-height:100px;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8125em;
height:auto;
margin-bottom:10px;
background: #4e535d;
padding:0px;
line-height: 1.5em;
}
#mitte_eins{
color:white;
margin-top:-2.3em;
margin-left:-8em;
text-align: justify;
}
#mitte_eins img{
padding:0 0 10px 10px;
}
#mitte_zwei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_zwei img{
float:right;
padding:0 0 10px 10px;
}
#mitte_drei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_drei img{
float: right;
padding:0 0 10px 10px;
}
#mitte_vier{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_vier img{
float:right;
padding:10px 0 10px 10px;
}
#mitte_fünf{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_fünf img{
float:right;
padding:10px 0 10px 10px;
}
#mitte_sechs{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_sechs img{
float:right;
padding:10px 0 10px 10px;
}
span {
font-weight: 700;
}
footer{
background: #4e535d;
height:45px;
text-align:center;
color:white;
font-family: Arial, Verdana, sans-serif;
font-size: 70%;
line-height:1.8;
margin:0 10px 0 10px;
}
</style>
</head>
<body>
<header>
<div id="oben">
<img class="bildheader" src="/image/Schriftzug3.jpg">
</div>
<div id="unten">
<img src="/image/Schriftzug3.jpg"></div>
</header>
<nav>
<ul class="nav">
<li><a href="#index">Start</a></li>
<li><a href="buecherverzeichnis.html">Bücherverzeichnis</a></li>
<li><a href="rezensionen.html">Rezensionen</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<main>
<div id="left">
</div>
<div id="mitte">
<div id="mitte_eins">
</div>
</div>
<div id="rechts">
</div>
</main>
<footer>
Erstellt mit HTML/CSS. Mit freundlicher Unterstützung by basti1012
</footer>
</body>
</html>