How to set a background inside a div - html

Question

Final resulting background image that I need:
Background image that I have used:
But I have got this Fiddle
::Summary of Fiddle::
HTML...
<div id="top-part">
<div id="topmost">
<div id="top-most" class="wrapper">
</div>
</div>
<div id="topmenu" class="wrapper">
</div>
CSS...
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
}
#top-most{
height: 139px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}

Answer 1

Update - to cover your recent edit
#header{
background: #f00 url('http://i.stack.imgur.com/GWVfL.jpg');
opacity: .6;
width: 100%;
height: 189px;
}
Working Fiddle
You could try using the background property in CSS:
div{
background: url('path_to_your_image.jpg') no-repeat;
}
Learn more about using the background-image property here
Note:
There is a difference between background and background-image. In this answer I've used the background property which basically takes all of the possible options for a background image in CSS and lets them be used in a single call.
For example, you could split the above up into two selectors:
div{
background-image: url('path_to_your_image.jpg') no-repeat;
background-repeat: no-repeat;
}

Answer 2

You could do like this fiddle
html...
<div id="top-part">
<div id="topmost">
</div>
</div>
<div id="top-menu" class="wrapper">
<div id="topmenu">
</div>
</div>
css...
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
height: 139px;
}
#top-menu{
background: url(img/bg-header-effects.png) no-repeat 50% 45%;
border-radius: 0 0 20px 20px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}

Answer 3

The easy approach that I'm thinking of is having a picture within divs covering the whole page. The code will be very simple, but the only downside is the image may be warped or it can be clicked on unless you have this.
HTML:
<div id="backgroundcolor">
<div id="backgroundimage">
</div>
</div>
CSS:
#backgroundcolor {
background-color: #000;
z-index: 1;
}
#backgroundimage {
background: ("http://cdn.theatlantic.com/static/infocus/election110712/s_e01_37923312.jpg");
resize: none;
object-position: center;
object-fit: initial;
}