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.

Possible duplicate of [Disable zoom on a div, but allow zoom on the page (an alternate div)](https://stackoverflow.com/questions/13886763/disable-zoom-on-a-div-but-allow-zoom-on-the-page-an-alternate-div) — Huelfe, Aug 23 '17 at 14:45
Try https://stackoverflow.com/questions/15233076/prevent-that-a-fixed-element-resizes-when-zooming-on-touchscreen — Stuart, Aug 23 '17 at 14:45

score 2 · Accepted Answer · answered Aug 23 '17 at 15:08

2

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>

answered Aug 23 '17 at 15:08

Sagar V

12,158
7
41
68

1

Thank you. But when I zoom-in this page, the image from your example zooms in as well. i would like to prevent that. I also tried to change my code, and the image still zooms in. – Diana Aug 23 '17 at 15:29
1

run the snippet and click on full screen. Then try zoom – Sagar V Aug 23 '17 at 15:46
A workaround for some might be to use screen units like `vw` and `vh` for `background-size`. In Chrome at least, zoom doesn't seem to affect these. But I'm not sure the spec is clear enough regarding zoom and screen units such that all browsers will definitely behave the same way. Also with this solution, you couldn't get a specific size like "20px". – V. Rubinetti Jul 06 '20 at 20:23

score 0 · Answer 2 · answered Aug 23 '17 at 14:50

0

maybe you can disable the viewport zoom

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

Cheers.

answered Aug 23 '17 at 14:50

Daniele De Matteo

114
6

1

Thank you for your suggestion. But I need to keep the page zoomable - I only need to prevent the image from zooming. Your code keeps the entire page from zooming in. – Diana Aug 23 '17 at 14:58

Prevent background image from zooming in

2 Answers2