div width to be 100% of content - html

Question

I have a div that holds content in it that has a relative position and is restricted by 980px width. I'm trying to give this div a background image banner that will spread out 100% width of the screen. I can't seem to figure it out.
The div that I'm trying to throw the image is #design-background that should be the background of div #bottom-content
Thanks in advance:
JSFiddle: https://jsfiddle.net/74j0o4mx/
<div id="container-content">
<div id="content">
<div id="all-content">
<div id="top-content">
<div id="top-left-content">
<div class="content-body" role="main" aria-label="Main Content Area"><div class="editorContent"><div style="font-family: ralewayregular; font-size: 120%; color: #a5610b; line-height: 200%; text-align: justify;">
<p>stuff</p>
</div></div><div style="clear:both;"></div></div> </div>
<div id="top-right-content">
<p>stuff</p>
</div>
<div id="bottom-content">
<div id="design-background">
</div>
<div id="bottom-left-content">
<div id="bottom-left-top">
<a href="#">
<img src="/images/layout/layoutImg4.jpg" alt="" width="304" height="194"> <h3>EXAMPLE</h3>
</a>
</div>
<div id="bottom-left-bottom">
<a href="#">
<img src="/images/layout/layoutImg3.jpg" alt="" width="304" height="195"> <h3>EXAMPLE</h3>
</a>
</div>
</div>
<div id="bottom-center-content">
<div id="bottom-center">
<a href="#">
<img src="/images/layout/layoutImg5.jpg" alt="" width="311" height="406"> <h3>EXAMPLE</h3>
</a>
</div>
</div>
<div id="bottom-right-content">
<div id="bottom-right-top">
<a href="#">
<img src="/images/layout/layoutImg1.jpg" alt="" width="308" height="195"> <h3>EXAMPLE</h3>
</a>
</div>
<div id="bottom-right-bottom">
<a href="#">
<img src="/images/layout/layoutImg2.jpg" alt="" width="308" height="195"> <h3>EXAMPLE</h3>
</a>
</div>
</div>
</div>
<div id="bottom-text-content">
<p>stuff</p>
</div>
</div>
</div>
</div>
</div>
CSS:
#design-background{
position:absolute;
height:350px;
top:50%;
left:0px;
right:0px;
margin-top: -175px;
background: url('../images/background-dec.jpg');
}
#content{
position:relative;
margin: 0 auto;
left:0;
right:0;
width:980px;
}
#all-content{
display:block;
position:relative;
width:98.9%;
margin: 0 auto;
}
#top-content{
margin: 0 0 0 13px;
position:relative;
display:block;
width:98.9%;
min-height: 165px;
}
#top-left-content{
position:relative;
width:65%;
left:0;
margin-top: 10px;
}
#top-right-content{
position:absolute;
right:0;
top:0;
width:35%;
margin-top: -30px;
text-align: right;
}
#bottom-content{
position:relative;
display:block;
text-align:right;
height:407px;
}
#bottom-left-content{
width:33%;
position:relative;
float:left;
height:407px;
margin-right:3.5px;
}
#bottom-center-content{
position:relative;
width:33.33%;
float:left;
height:407px;
text-align: center;
}
#bottom-right-content{
position:relative;
float:right;
width:33%;
height:407px;
}
#bottom-left-top{
position:absolute;
right:0;
}
#bottom-left-bottom{
position:absolute;
bottom:0px;
right:0;
}
#bottom-right-top{
position:absolute;
right:0;
}
#bottom-right-bottom{
position:absolute;
bottom:0px;
right:0;
}
#bottom-center{
position:absolute;
margin: 0 0 0 12px;
left:0;
right:0;
}
#bottom-text-content{
position:relative;
display:block;
width:100%;
text-align:center;
font-family: Semibold;
color: rgb(165,97,11);
font-size:300%;
vertical-align: middle;
}
#content h3{
display:none;
}
#content a:hover h3{
color:#FFF;
display:block;
position: absolute;
top:50%;
margin-top: -25px;
width:100%;
text-decoration: none;
font-family: ralewayregular;
height:50px;
background-color: rgba(0,0,0,0.7);
text-align: center;
padding-top:25px;
font-size: 200%;
}
#container-content{
position:relative;
margin: 0 auto;
width:100%;
height:100%;
background-color:#FFF;
min-height: 680px;
}

Answer 1

The key is to make sure the parent of #design-background has a position relative value and set to 100% width. Read this to learn how it works.
Important properties:
#content {
position:relative;
}
#all-content {
width:980px;
margin: 0 auto;
}
See the updated demo here - http://jsfiddle.net/rrwjkb3g/