How to create an div background that is not affected by page zoom with CSS

Question

My question is going to be pretty concise. I saw this Deezer page and I tried to zoom in and out to see that the image is "out of zoom" (see the image below)

enter image description here

Below is a structure we consider to be my page:

<body>
  <div class="visual-header">
    <div class="container">
       SOME TEXT
    </div>
  </div>
  PAGE CONTENT
</body>

How am I supposed to use image.png of a size of 2000x800 pixels to get this effect?

Do you mean this: http://stackoverflow.com/questions/15233076/prevent-that-a-fixed-element-resizes-when-zooming-on-touchscreen — user3522940, Jun 29 '15 at 19:41
I picked that extension randomly. @user3522940, I am not quite sure that is what I need, because the element resizes, its background doesn't — Victor, Jun 29 '15 at 19:45
should just have to define the size, right? where is your CSS? — fred randall, Jun 29 '15 at 20:16

m69 ''snarky and unwelcoming'' · Accepted Answer · 2015-06-29T20:37:45.670

2

This will make the background image fit the width of the screen, whatever the zoom level.

BODY
{
    background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
    background-size: 100%;
}

If you want the image to stretch both horizontally and vertically (and not retain its aspect ratio), use:

BODY
{
    margin: 0;
    min-height: 100vh;
    background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
    background-size: 100% 100%;
}

edited Jun 29 '15 at 20:37

answered Jun 29 '15 at 20:12

m69 ''snarky and unwelcoming''

10,954
3
28
50

Run the code snippet in full page mode to see the effect. – m69 ''snarky and unwelcoming'' Jun 29 '15 at 20:14
I can't believe that I didn't think of this! Thank you! Such a simple solution – Victor Jun 29 '15 at 20:25
I edited the answer in case you want the image to stretch in both directions. – m69 ''snarky and unwelcoming'' Jun 29 '15 at 20:29
what is the "100vh" there? – Victor Jun 29 '15 at 20:41
1

100vh = 100% of the viewport height; otherwise the BODY heigth is determined by the contents of the page, which may not fill the whole window. – m69 ''snarky and unwelcoming'' Jun 29 '15 at 21:03

How to create an div background that is not affected by page zoom with CSS

1 Answers1