CSS Problem with 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>

CSS problem with background-attachment:fixed;

When you set background-attachment:fixed it fixes the background in relation to the window. So you would then need to adjust the background-position of your images so they appear in the right place. If you replace your backgroundproperties with the css below it will line up properly.

div.backgroundboxleft {
    background-image: url("/images/back_1.png");
    background-attachment: fixed;
    background-position: 0 44px;
    background-repeat: no-repeat;
}

div.backgroundboxright {
    background-image: url("/images/back_2.png");
    background-attachment: fixed;
    background-position: 1323px 44px;
    background-repeat: no-repeat;
}

Live example: http://jsfiddle.net/tw16/6fZ96/embedded/result/

To clarify background-attachment:fixed stops the background from scrolling with the window. So if your viewport is too small and you have to scroll horizontally or vertically the background will not move (i.e. it will be overlapped). More information can be found here.

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>

background-attachment: fixed not working as expected in firefox

It looks that, though counter-intuitive, the behavior of Firefox(and Edge) is intended and correct as per spec: the transform property (used by the GSAP library for animation) makes background-attachment: fixed behave as scroll. So I'd suggest removing background-attachment: fixed and replacing it with different background-position values for each slice of the image.

May be this answer would also be relevant: https://stackoverflow.com/a/43067630/2533215

background-attachment: fixed not working

background-attachment is specifically about the background image of an element. It will not convert your element to a sort of background attachment, so I think the meaning of that CSS property is confusing you.

What you do have available is position: fixed; that will make your element so it stays in the same location in your viewport regardless of scrolling. If you want the rest of your content to overlap your header, you'll have to make the content also position: fixed, so something like this.

CSS:

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

#scrolling-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

Here's a fiddle demonstrating this.

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.

---

Related Topics