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


Tags: javascript,jquery,html,css

Problem :

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?



Solution :

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%;
}


    CSS Howto..

    SCSS, Compass and GULP: How to minify without breaking CSS?

    How to Make A Fancy Arrow Using CSS?

    JQuery: How to add a CSS class to a HTML button?

    How to set CSS3 ::selection using Javascript

    How can I stop my CMS’s CSS affecting my content?

    How to display text in the middle?

    wordpress submenu css show on parent active and child active

    How to load chosen alternative css as default css? [closed]

    How to fix hover on transparent photo

    Show an image from b&w to color as if it were loading (left to right)

    how to always display empty tags, is there a css property for this?

    How to target separated class names through css?

    Showing only one row of items with css independently of users resolution?

    CSS question: how to remove the border from an image in WordPress

    How to build HTML email using CSS?

    How Do I Make Li Clickable for Radio Button Inside

    How to color a responsive table in Bootstrap?

    how to call browser based css?

    how can I make my navbar scroll smoothly to the top on page click

    How can I select second element and after that in CSS?

    CSS how to align vertically center div floating elements of menu?

    How can i put random values to css properties using JQuery?

    Integration of CSS, Javascript and html ,,,howto

    CSS: how do I add Twitter Bootstrap to an existing web page with it's own CSS?

    How to fix a div to the same side when a mobile is on landscape

    How to make styling and functioning of form elements get not to break in all browsers?

    Weird css box-sizing in bootstrap 3. How to get rid of horizontal slider

    How to get ratio of scale image, when it's autoscaled by background-cover?

    how to animate width and height 100% using css3 animations?

    how to get by title attribute