html - Background-image being cut off when trying to make it fit around the element -

i trying background-image fit around video , every time try making bigger top cut off , can't seem make fit around video , good.

i want image border video. pretty sure has image going out side video div, mistaken. appreciated!

html:

<div class="videos">     <div id="video1">         <iframe width="450" height="315" src="https://www.youtube.com/embed/vr0dxfqqfnu" frameborder="0" allowfullscreen></iframe>     </div>     <div id="video2">         <iframe width="450" height="315" src="https://www.youtube.com/embed/fevkx229xbs" frameborder="0" allowfullscreen></iframe>         <!--h <img src="images/vidborder2.png" class="vidborder2">-->     </div> </div> 

css:

div#video1 {     float: right;     background-image: url(images/vidborder.png);     background-repeat: no-repeat;     display: table-cell;     vertical-align: middle;     text-align: center; } div#video2 {     background-image: url(images/vidborder2.png);     background-repeat: no-repeat;     display: table-cell;     vertical-align: middle;     text-align: center;     background-size: 80%;     background-position: center; } .videos {     margin-top: 40px; } 

you got close solution.

i pretty sure has image going out side video div, mistaken.

the image won't go outside div.

for image border of video, have add padding div. (also mentioned @tylerism in comments)

check out fiddle.

following changes did in code.

text-align: center; background-size: 80%; 

padding: 10px 10px; 

i used image testing purpose. can replace url.