ダブル背景画像

Question

今回は、私はより良い質問を書式設定できるようになることを願っています。後者が些細なのであれば謝りますが、私は初心者です。私は画像のようにする必要があるヘッダーで助けを必要とするでしょう：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.私はタイトルを置くdivの背景画像として半月を表示するための許容可能な方法を見つけることができなかったので、私は半月をバックグラウンドイメージとして別のdivを作ったので、このdivに相対的な位置を与え、適切な位置に収まるように上、右、左に作業しました。しかし、私はどのようにテキストがすべての前に現れるか分かりません。また、ブラウザのウィンドウを小さくすると、ハーフムーンがページの周りを移動します。物事を良くするためにできることはありますか？

私の試しは以下の通りです。助けを前にありがとう。

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

ないあなたはそれを行う上で計画しているが、これを行うことができるものを確認してください。あなたが得ることを期待していることを教えてくれればもっと良いでしょう！しかしこれまでのところ、これはあなたがやろうとしていることです！

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>