title: background disappears when scrolling with a top fixed menu
body: <p>I have an issue about a menu which is fixed at the top of page when I am scrolling.</p>
  
  <p>In this page, I am using a child div which is wider than the parent div : I do it from this <a href="https://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css">link</a>. </p>
  
  <p>menu is well fixed when scrolling but the problem is that image background (the blue "cloud" at the center) into the child div (the horizontal black bar of 100% width) disappears when I start to scroll down, I mean once the menu appears at the top of page.</p>
  
  <p>I don't know how to circumvent this problem.</p>
  
  <p>If someone could see what's wrong,</p>
  
  <p>Thanks</p>
  
  <p><strong>UPDATE :</strong></p>
  
  <p>I tried your solutions but it doesn't seem to work . Maybe my issue is not well understood, that's why I put 2 screenshot illustrating the problem :</p>
  
  <p>At the beginning, I have the following top of page :</p>
  
  <p><a href="https://i.stack.imgur.com/HRCqB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HRCqB.png" alt="starting situation"></a></p>
  
  <p>When I start to scroll down, I get : </p>
  
  <p><a href="https://i.stack.imgur.com/ViE6t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ViE6t.png" alt="image disappeared"></a></p>
  
  <p>I would like that "blue cloud" image not to disappear.</p>