doppeltes Hintergrundbild

Question

diesmal hoffe ich, dass ich in der Lage sein werde, die Frage besser zu formatieren, und ich entschuldige mich, wenn letzteres trivial ist, aber ich bin ein Anfänger in HTML und CSS. Ich brauche Hilfe mit einem Header, der wie im Bild sein muss: made of a background image cut into two halves by a white bar where the navigation bar(right) and the title (left) stand. The title has another background image shaped as a half-moon. Da ich keinen akzeptablen Weg gefunden habe, den Halbmond als Hintergrundbild des Divs erscheinen zu lassen, wo ich den Titel einstelle, I machte ein anderes div mit dem Halbmond als Hintergrundbild und ich gab diesem div eine relative Position, arbeitete oben, rechts und links, damit es am richtigen Platz passte. Allerdings weiß ich nicht, wie der Text vor allem auftaucht. Auch wenn ich das Browserfenster verkleinere, bewegt sich der Halbmond um die Seite herum. Kann ich etwas verbessern?

mein Versuch ist unten. Vielen Dank im Voraus für jede Hilfe.

html, body *{margin: 0; box-sizing: border-box} 
 

 
h1, h2, h3, h4, h5 { 
 
    font-family: 'Play', sans-serif; 
 
    color: #c76161; 
 
} 
 

 
#header { 
 
    background: url("http://i65.tinypic.com/t8vzp2.jpg") 100% no-repeat; 
 
    background-position: center center; 
 
    position: fixed; 
 
    right: 0; 
 
    left: 0; 
 
    top:0; 
 
    display: block; 
 
    width: 100%; 
 
    height: 14.37em; 
 
    
 
} 
 

 
#testo-header{ 
 
    background-color: white; 
 
    height: 70px; 
 
    width: 50%; 
 
    position: absolute; 
 
    top: 80px; 
 
    left: 0; 
 
    text-align: center; 
 
    line-height: 70px; 
 
    z-index: 2; 
 
} 
 

 
#mezzaluna{ 
 
    background-image: url(http://i63.tinypic.com/w72ag6.png); 
 
    background-repeat: no-repeat; 
 
    height:90px; 
 
    position: relative; 
 
    bottom: 67px; 
 
    left: 180px; 
 
    z-index: 1; 
 
} 
 
ul#nav { 
 
    background-color: white; 
 
    height: 70px; 
 
    width: 50%; 
 
    position: absolute; 
 
    top: 80px; 
 
    right: 0; 
 
    font-family: sans-serif; 
 
    font-size: 1em; 
 
    font-weight: bold; 
 
    list-style-type: none; 
 
    line-height: 35px; 
 
    display: block; 
 
} 
 

 
ul#nav li { 
 
    float: left; 
 
    text-align: center; 
 
    vertical-align: text-top; 
 
    padding: 20px; 
 

 
} 
 

 
ul#nav li a { 
 
    text-decoration: none; 
 
    color: #3a7777; 
 
} 
 

 
ul#nav a:hover { 
 
    color: #f5af33 
 
    
 
}

bodybody> 
 
    <div id="header"> 
 
     <div class="wrap"> 
 
      <div id="testo-header"> 
 
       <h1>Rosso Pomodoro</h1> 
 
       <div id="mezzaluna"></div> 
 
      </div> 
 
      <ul id="nav"> 
 
       <li><a href="#">Home</a></li> 
 
       <li class="active"><a href="#">Ricette</a></li> 
 
       <li><a href="#">Categorie</a></li> 
 
       <li><a href="#">Blog</a></li> 
 
       <li><a href="#">Contatti</a></li></li> 
 
      </ul> 
 
     </div>

Answer 1

nicht sicher, was Sie mit, dass planen, zu tun, aber Sie könnten dies tun. Es wäre besser, wenn Sie uns sagen, was Sie erwarten! Aber das ist bisher das, was du versuchst!

html, body *{margin: 0; box-sizing: border-box} 
 

 
h1, h2, h3, h4, h5 { 
 
    font-family: 'Play', sans-serif; 
 
    color: #c76161; 
 
} 
 

 
#header { 
 
    background: url("http://i65.tinypic.com/t8vzp2.jpg") 100% no-repeat; 
 
    background-position: center center; 
 
    position: fixed; 
 
    right: 0; 
 
    left: 0; 
 
    top:0; 
 
    display: block; 
 
    width: 100%; 
 
    height: 14.37em; 
 
    
 
} 
 

 
#testo-header{ 
 
    background-color: white; 
 
    height: 70px; 
 
    width: 50%; 
 
    position: absolute; 
 
    top: 80px; 
 
    left: 0; 
 
    text-align: center; 
 
    line-height: 70px; 
 
    z-index: 2; 
 
} 
 
#testo-header h1:before{ 
 
    content: '\0020'; 
 
    background-image: url(http://i63.tinypic.com/w72ag6.png); 
 
    background-repeat: no-repeat; 
 
    background-color: #ff0000; 
 
    width: 75%; 
 
    height:100%; 
 
    display: block; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 12.5%; 
 
    
 
    
 
    border-bottom-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
    
 
    z-index: -1; 
 
} 
 

 
ul#nav { 
 
    background-color: white; 
 
    height: 70px; 
 
    width: 50%; 
 
    position: absolute; 
 
    top: 80px; 
 
    right: 0; 
 
    font-family: sans-serif; 
 
    font-size: 1em; 
 
    font-weight: bold; 
 
    list-style-type: none; 
 
    line-height: 35px; 
 
    display: block; 
 
    z-index: 5; 
 
} 
 

 
ul#nav li { 
 
    float: left; 
 
    text-align: center; 
 
    vertical-align: text-top; 
 
    padding: 20px; 
 

 
} 
 

 
ul#nav li a { 
 
    text-decoration: none; 
 
    color: #3a7777; 
 
} 
 

 
ul#nav a:hover { 
 
    color: #f5af33 
 
    
 
}

bodybody> 
 
    <div id="header"> 
 
     <div class="wrap"> 
 
      <div id="testo-header"> 
 
       <h1>Rosso Pomodoro</h1> 
 
      </div> 
 
      <ul id="nav"> 
 
       <li><a href="#">Home</a></li> 
 
       <li class="active"><a href="#">Ricette</a></li> 
 
       <li><a href="#">Categorie</a></li> 
 
       <li><a href="#">Blog</a></li> 
 
       <li><a href="#">Contatti</a></li></li> 
 
      </ul> 
 
     </div>