Prevent background image from zooming in

Question

I have a div with a background image. When the user zooms-in the page from the browser (using Ctrl & + or Ctrl + scroll), I don't want to zoom in the image. The image should remain unchanged by the zoom. Is there any way to do this?

This is the styles of the div containing the background image:

.owl-slide{
    background-image: url('...');
    background-repeat: no-repeat;
    background-position: center;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

I know that the normal behaviour would be to zoom-in everything inside the page, even the image. But this is a client's request which needs to be solved, even if I don't agree with it.

Answer 1

set top and left value for the element and add a position:absolute. also set the width and height.

.owl-slide {
  background-image: url('http://www.freepngimg.com/download/nature/1-2-nature-png-picture.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
}

<div class="owl-slide">Sample div</div>