TV-Shaped CSS Figure delimiting image - html

Question

I can't seem to figure how to accomplish the following.
I have this shape:
This is the desired outcome:
However, when I apply the overflow to the child div this happens:
Or this when the overflow is in the parent div
I have tried splitting the CSS into more divs and then trying to overlap them and all these attempts have been failures.
The HTML and CSS are the following
CSS:
#tvshape {
position: relative;
width: 200px;
height: 150px;
margin: 20px 10px;
background: #0809fe;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tvshape:before {
content: "";
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
#tvshape img {
height:100%;
width:100%;
}
HTML (Nothing special):
<div id="tvshape">
<img src="http://wallpaperpanda.com/wallpapers/pbc/RER/pbcRERyTy.jpg">
</div>
And Here is the JSFiddle and the CSS and HTML.
How could I accomplish so ?
Guidance will be highly appreciated.
EDIT: I required the image to be an element of it's own, background:url() it's not what I'm looking for.
EDIT #2: This was one of the solutions given, the figures are not the same ones, the rounded left and right sides dissapear.
Thank you.

Answer 1

I could come up with two options, though one involves leaving out the image-element, and the second uses jQuery... (I honestly don't think it's possible to do with the image-element...sorry.)
Option 1)
Since the image URL has to be in the HTML code, adjust the code like this:
<div id="tvshape" style="background-image: url(http://wallpaperpanda.com/wallpapers/pbc/RER/pbcRERyTy.jpg);"></div>
Then add the following CSS:
#tvshape {
background-position: center center;
}
Here's a fiddle: http://jsfiddle.net/Niffler/cqPR8/
Option 2)
Basically the same as Option 1, except I "cheated" by leaving the HTML code as it was, i.e.
<div id="tvshape">
<img src="http://wallpaperpanda.com/wallpapers/pbc/RER/pbcRERyTy.jpg" alt="" />
</div>
Add some jQuery so that the HTML ends up looking like Option 1:
var tvbackground = $('#tvshape img').attr('src');
$('#tvshape').css('background-image', 'url(' + tvbackground + ')');
Then finally hide the image-tag with CSS:
#tvshape img {
display: none;
}
Here's another fiddle: http://jsfiddle.net/Niffler/4WFL5/

Answer 2

I just included this code in your css
#tvshape{ background:url('http://1.bp.blogspot.com/_Y1fFfKjiX2g/S_gMwLeGtjI/AAAAAAAALlE/vdX0ttHeEjg/s1600/CLOUDS2.jpg')center no-repeat; }
The image used is taken randomly just for example purposes. Is this desired version you want?
JSFiddle : Link