CSS Body Background Image Fixed to Full Screen Even When Zooming In/Out

CSS body background image fixed to full screen even when zooming in/out

I've used these techniques before and they both work well. If you read the pros/cons of each you can decide which is right for your site.

Alternatively you could use the full size background image jQuery plugin if you want to get away from the bugs in the above.

Prevent background image from zooming in

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>

CSS Image size, how to fill, but not stretch?

You can use the css property object-fit. ("sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.")

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

How do I stop a CSS layout from distorting when zooming in/out?

As this question still gets constant views, I'll post the solution I use currently.

CSS Media Queries:

@media screen and (max-width: 320px) { 

/*Write your css here*/

}

@media screen and (max-width: 800px) { 

}

Check out:
CSS-Tricks + device sizes and Media Queries

CSS background-size: cover + background-attachment: fixed clipping background images

Unfortunately this is simply an artifact of how fixed positioning works in CSS and there is no way around it in pure CSS - you have to use Javascript.

The reason this happens is due to the combination of background-attachment: fixed and background-size: cover. When you specify background-attachment: fixed it essentially causes the background-image to behave as if it were a position: fixed image, meaning that it's taken out of the page flow and positioning context and becomes relative to the viewport rather than the element it's the background image of.

So whenever you use these properties together, the cover value is being calculated relative to the size of the viewport irrespective of the size of the element itself, which is why it works as expected when the element is the same size as the viewport but is cropped in unexpected ways when the element is smaller than the viewport.

To get around this you basically need to use background-attachment: scroll and bind an event listener to the scroll event in JS that manually updates the background-position relative to how far the window has been scrolled in order to simulate fixed positioning but still calculate background-size: cover relative to the container element rather than the viewport.

Background Image to take up the entire screen

Is this the HTML after rendering, or is it from your editor?

• We would be grateful if you could show us a print-screen of your app-page, and your HTML after being rendered by the browser!

  - Will this app just run in some sort of fixed resolution/screen? If not, I don't think that having a cropped image just to feet your screen is a good solution, since there are many other screens with different resolutions out there, and if you want a background to cover them all then it will certainly be cropped at certain resolutions/screens.

Taking this into account, you have a couple of options to create a full size background for any type of screens/resolutions.

You can create a centered background that will always feet a certain screen, no matter how bigger it is nor how small the image is, with just two CSS rules:

.app-background {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    overflow: hidden;
    z-index: -1;
}

.app-background > img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
}

.app-background will be the wrapper of the background and will have:

- position: fixed; in order to maintain its position, in case of one of the parent elements having an horizontal/vertical scrollbar, and also to not consume space used for the content of the page;

- top/left: -50%; width/height: 200%; to center it and to make it twice the size of its parent/screen; (now your image has a parent where it can be centered);

- overflow: hidden; z-index: -1; just to crop the image inside and to ensure the page's content doesn't get hidden behind the background;

.app-background > img will be the image serving as a background and will have:

- position: absolute; top/right/bottom/left: 0; margin: auto; to center the image horizontally and vertically inside the .app-background;

- min-width/min-height: 50% to prevent the image from being smaller than 100% of the container's resolution/screen size.

The Concept (view it in full screen)

html, body {  width: 100%;  min-width: 100%;  height: 100%;  min-height: 100%;  margin: 0;}
.app-background {  position: fixed;  top: -50%;  left: -50%;  width: 200%;  height: 200%;  overflow: hidden;  z-index: -1;}
.app-background > img {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;  min-width: 50%;  min-height: 50%;}

/* Instructions below this comment are NOT needed for the solution */body {  font-family: Calibri, Arial;  text-align: center;  }
body:before {  content: '';  height: 100%;  display: inline-block;  vertical-align: middle;  margin-left: -0.25em;}
*, .border-box {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
.app-container {  position: relative;  border: 2px solid red;  color: red;  display: inline-block;  vertical-align: middle;  width: 40%;  height: 40%;}
.app-background {  position: absolute;  border: 2px solid purple;  color: purple;}
.app-container:before,.app-background:before {  content: '.app-background';  font-size: 25px;  display: block;  padding-bottom: 10px;}
.app-container:before {  content: '.app-container';}
.app-background > img {  opacity: 0.5;  z-index: -1;}

<div class="app-container">  <b>This red box is what you will see in your screen.</b>    <div class="app-background">    This purple box is where your image will be centered and cropped.        <img src="https://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg">        <b>Feel free to zoom-in/out your browser to see the effect from different resolutions!</b>  </div></div>

---

Related Topics