double background image - html

Question

this time I hope i'll be able to format the question better and I apologize if the latter is trivial, but I'm a beginner in html and css. I'd need help with a header, which needs to be as in the picture: 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.Since I couldn't find an acceptable way to make the half-moon appear as a background-image of the div where I put the title, I made another div with the half-moon as a background-image and I gave this div a relative position, working on top, right and left so to make it fit in the right place. However, I don't know how make the text show up in front of everything. Also if I make the browser window smaller the halfmoon moves around the page. Is there something I can do to make things better?
my try is below. Thanks in advance for any help.
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>Home</li>
<li class="active">Ricette</li>
<li>Categorie</li>
<li>Blog</li>
<li>Contatti</li></li>
</ul>
</div>

Answer 1

Not sure what you are planning on doing with that but you could do this. It would be better if you tell us what you expect to get! But so far this is what you are trying to do!
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>Home</li>
<li class="active">Ricette</li>
<li>Categorie</li>
<li>Blog</li>
<li>Contatti</li></li>
</ul>
</div>