如何制作标题背景

Question

这是我的菜单栏。它具有粘性的属性，但当文本滚动到它后面时，你可以看到它背后。我想在它后面放一个白色图像，但每次我试图把它放在那里它会弄乱页面格式。

sticknav {
background: white;
height: 30px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;}

.body {
  height: 10000px;
  padding: 0;
  margin: 0;
  text-align: centre;}

.fixed { position:fixed;}

.header {
  height: 50px;
  background: white;
  color: blue;
  font-family: Droid Sans;
  font-size: 18px;
  line-height: 1.6em;
  font-weight: bold;
  text-align: center;
  text-shadow:
-1px -1px 0 gold,
1px -1px 0 gold,
-1px 1px 0 gold,
1px 1px 0 gold;
  width: 100%;
  box-sizing:border-box;}

.header1 img {
float: left;
width: 100px;
height: 100px;
background: white;
}
.header img {
float: left;
width: 100px;
height: 100px;
background: white;}

.header h1 {
position: relative;
top: 18px;
left: 10px;}

ul#menu, ul#menu ul.sub-menu {
  padding:0;
  margin: 0;}

ul#menu li, ul#menu ul.sub-menu li {
  list-style-type: none;
  display: inline-block;}

ul#menu li a, ul#menu li ul.sub-menu li a {
  text-decoration: none;
  color: gold;
  background:blue;
    border: solid 2px gold;

padding: 5px;
display:inline-block;}

ul#menu li {
 position: static;}

ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 25%;
width: 100%;}

ul#menu li:hover ul.sub-menu {
display:block;}

.left_column {
border-right: solid 1px #d1d2d4;
display: inline-block;
height: 100%;
max-width: 50%;
min-height: 900px;
min-width: 300px;
position: relative;
width: 40%;
background-color:white;}

.right_column {
display: inline-block;
background-color:white;
min-height: 900px;
max-width: 50%;
min-width: 300px;
position: absolute;
height: 100%;
width:40%;}

我在https://jsfiddle.net/2ddLyuho/2/

创建了相同的小提琴