Detect Support for Background-Attachment: Fixed

background-attachment : fixed; not working with background-position

Why is this happening?

This is working as intended, when you use background-position: fixed; the background is positioned relative to the viewport. This means in your example the background is now aligned on the very left of the viewport outside of the .right element.

You can see this by positioning .right along the left edge of the viewport in the snippet below.

.wrapper {  display: flex;}
main {  background-color: red;  height: 1000px;  max-width: 992px;  width: 100%;}
aside {  min-width: 150px;  background-color: green;}
.left {  background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);  background-repeat: no-repeat;  background-position: right 0px;  /*background-attachment: fixed; Doesn't work*/}
.right {  background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);  background-repeat: no-repeat;  background-position: left 0px;  background-attachment: fixed;  order: -1;}

<div class="wrapper">  <aside class="left"></aside>  <main></main>  <aside class="right"></aside></div>

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>

Detect Support for Background-Attachment: Fixed

background-attachment : fixed; not working with background-position

Why is this happening?

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

Related Topics

Leave a reply