How can I apply mobile css query to my div with background image?

Question

I have a html div

<div class="col-md-6 elo">       
    <div class="col col-1-2" style="animation-delay: -42s;">
      <div class="content animated fadeIn delayed">
        <div class="my-video">
            <video class="video--app" id="myVideo" autoplay="" muted="" preload="auto">
                <source src="./img/video.mp4" type="video/mp4">
            </video>
        </div>
      </div>               
    </div>
</div>

with a background image set in css code:

.my-video {
    margin: auto;
    width: 372px;
    height: 705px;
    background-image: url(../img/myvideo@2x.png);
    background-size: 368px 705px;
} 

When user enters my page he sees the mp4 played in a frame myvideo@2x.png . But when he shrinks the webpage, I hide the video by applying mobile query:

@media (max-width:600px){

  .video--app{
    display:none;
  }

and I also would like to change the size of the background image, so its width is equal to 80% of the visible area (height should be proportional to width). I tried setting:

background-size: auto;

to my-video but it didn't work. How can I fix it then? Thanks!

Answer 1

set background-size:100% instead and add width:100%

 .my-video { margin: auto; width: 372px; height: 705px; background: url(http://store.storeimages.cdn-apple.com/4973/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-silver-2014_GEO_US?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=J8El53) no-repeat 0 0; background-size: auto; } @media (max-width: 600px) { .video--app { display: none; } .my-video { background-size: 100%; width: 100% } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-6 elo"> <div class="col col-1-2" style="animation-delay: -42s;"> <div class="content animated fadeIn delayed"> <div class="my-video"> <video class="video--app" id="myVideo" autoplay="" muted="" preload="auto"> <source src="./img/video.mp4" type="video/mp4"> </video> </div> </div> </div> </div> </div> </div> 

Answer 2

You can use background size as cover.

.my-video {
    margin: auto;
    width: 372px;
    height: 705px;
    background-image: url(../img/myvideo@2x.png);
    background-size: cover;
}