Question

I have still having some CSS trouble with this and I cannot seem to fix it.
I just made a test page here to see if anyone can help:

The html:

<div class="menu_background">
    <div class="menu">This is my menu</div>
</div>

The CSS:

body {
background-color: #FFC;
margin:0;
padding:0
}
.menu_background {
background:url(images/headline.jpg) repeat-x;
}
.menu {
width:60em;
margin:0 2em;
border:solid 1px #F00;
color:#FFF
}

The problem: there is a weird overlapping happening when you shorten the browser window, making it smaller than 60em.

You can look at the test page and here are two screenshots:

1. This is when the browser is full size:

2. This is when i shorten the browser window and scroll right:
   

The best way is to look at my test page and see for yourself.

Answer 1

to avoid that put the background in your menu directly

.menu {
  background:url(images/headline.jpg) repeat-x;
  width:60em;
  margin:0 2em;
  border:solid 1px #F00;
  color:#FFF
}

(review)
to have background 100%

.menu_background {
   background:url(http://phpblog.inutritie.ro/images/headline.jpg) repeat-x;
   min-width: 64em;
}