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="zxx"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Flexbox layout</title> <meta name="description" content="aufwachen.ch - Rezensionen und Bücher abseits des Mainstreams"> <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> <body> <header> <div id="oben"> <img class="bildheader" src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=512&d=https://static.codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png"> </div> <div id="unten"> <img src="http://www.forum-hilfe.de/attachment.php?attachmentid=4735&d=1545142895"></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"><img src="StartBild12.jpg" alt="Bücher abseits des Mainstreams" style="width:100%; margin: auto; padding: 0px 0px 0px 75px;"> </div> </div> <div id="rechts"> </div> </main> <footer> Erstellt mit HTML/CSS. Mit freundlicher Unterstützung by basti1012 </footer> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!