TV-Shaped CSS Figure delimiting image

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/