Background-Attachment: Fixed Interfering with Background-Size

Background image gets too big when adding background-attachment: fixed

background-attachment: fixed will handle the image as if the element was 100% height and width of the viewport. Therefore background-size: cover; will resize the image height to fit the viewport.

Try using background-size: 100% auto; (100% of the width | auto will set the height in a way that won't stretch the image)

I tested it on your side and with that edit it works 100%.

Unfortunately I can not add a code snipped because it will size the background to stackoverflows viewport and not to the code-sippets viewport.

background position not centering while background-attachment fixed applied?

section.apply {
    height: 55rem;
    width: 100%;
    background: url("../img/apply.jpg") no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    position: relative;
    background-position-y:10px

}

try using this

Question about a mobile friendly alternative to using background-attachment: fixed, using pseudo element instead

Question 1: Does position fixed, fix the background color (dark blue) and the url image so it doesn’t move when you scroll

Yes - that is basically the meaning of fixed.

Question 2: which property or properties modify the background color and / or the background-image? For example does top:0 and left: 0 modify the background color only? Does background -size modify the url(jpeg) only?

top and left do not (directly) modify the background. What they do is position the whole pseudo element so, indirectly, they change the position of backgroound because they have changed the position of the whole pseudo element which includes its background. background-size will affect the image.

Question 3: don’t you need to add (will-change: transform;) in the code.

I don't understand why this should be necessary since there is nothing upcoming that is being transformed. Yes the user might scroll but the system has already been given the information it needs to make a good job of keeping the background (the pseudo element) fixed.

There are in fact several possibilities for misusing will-change - it can make things worse so I would avoid it unless you are really seeing performance issues. See https://developer.mozilla.org/en-US/docs/Web/CSS/will-change for more
in depth discussion of this.

Here is a snippet which shows the backgrounds remaining fixed if you scroll down.

body {
  width: 100vw;
  --color-darkblue: darkblue;
  color: white;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: -1;
  background: var(--color-darkblue);
  background-image: linear-gradient(rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://picsum.photos/id/1015/300/300);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<body>
  <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
</body>

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.

Interaction of transparent elements with background-attachment: fixed

The question asks why the transparent div does not show the background of the first div.

The answer is that the first div has scrolled out of view.

The first div has not been fixed in the viewport. Only its background has been fixed in position - it isn't going to 'stay behind' as the div gets scrolled out of view.

You can see this if you remove the other divs but put the first one into a very tall div and scroll.

You can also see it if you use a pre IOS15 version of Safari - these did not support background-attachment and the background begins to scroll out of view immediately.

If what you want is for a sort of parallax effect where the bacground image stays fixed while others scroll over it make the first div the wrapper of the others in the way the answer from @alejskorovin shows.

Chrome issue with background-attachment fixed and position fixed elements

Found this solution on: https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

Seems to me to be a clever way to use :before pseudo element. Limit the width for fixed width elements but works great for full width pages. Essentially comes out to look like this:

.background_fill {  overflow: hidden;  position: relative;    color: red;}.background_fill:before {  background-color: white;  background: url('http://www.lausanneworldpulse.com/pdfs/brierley_map_0507.jpg') no-repeat center center;  background-size: cover;  z-index: -3;  content: " ";  position: fixed;  will-change: transform;  width: 100%;  height: 100%;}

<div class="background_fill">  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div></div>