CSS property for setting a background-image's position.
CSS background-attachment property sets whether a background-image's position is fixed within the viewport, or scrolls with its containing block.
background-attachment MDN Reference
Questions tagged [background-attachment]
106 questions
44
votes
18 answers
Fixed attachment background image flicker/disappear in chrome when coupled with a css transform
I am currently doing a parallax website theme. The background images need to be attached as fixed for certain 'div's and 'section's to avoid jquery indulging in everything. The problem was the background images of the tags below any animated item…
BlackPanther
- 1,732
- 1
- 14
- 19
42
votes
9 answers
CSS background-size: cover + background-attachment: fixed clipping background images
I have a list of figures containing background images. Something like the following:
-
-
- …
Godwin
- 9,739
- 6
- 40
- 58
35
votes
8 answers
Chrome issue with background-attachment fixed and position fixed elements
I've had this issue for a while and it seems to be a Chrome redraw bug that hasn't been fixed. So I'm looking for any stop-gap fixes.
The main issue is that when an element on the page has a background image that uses:
background-attachment:…
Alex
- 824
- 2
- 14
- 29
31
votes
4 answers
background-attachment fixed with transform not working in Firefox
CSS value transform turn off background-attachment: fixed in Firefox.
Here is the example
div {
transform: translate3d(0,0,0); // if remove starts to work
width: 100%;
height: 2000px;
background-image:…
ReWWeR
- 319
- 3
- 5
25
votes
3 answers
background-attachment: fixed interfering with background-size
I've got a background image scaled to fit inside its container, and I have appropriate fallbacks (not shown) for when Modernizr detects that the browser does not support background-size.
.wrap {
width: 200px;
height: 116px;
position:…
crowjonah
- 2,858
- 1
- 23
- 27
18
votes
5 answers
Background-attachment:fixed Not Working - Android Chrome (v40)
Background
( This has been asked before, many times, I know. However, it seems to have been caused by different things each time. I have gone through about four different StackOverflow answer threads and tried everything. Nothing seems to be working…
Kelderic
- 6,502
- 8
- 46
- 85
9
votes
1 answer
background-attachment:fixed internet explorer 11 odd up & down jiggle
Noticed an odd and annoying bug in IE11. Images placed in the background using css with background-attachment fixed do this odd up & down jiggle dance when scrolling. It primarily happens when using the scroll wheel or when using the arrow buttons…
Jose Ch.
- 3,856
- 1
- 20
- 34
7
votes
1 answer
Fixed position background image in Firefox doesn't work with transformed element. Is this a FF bug?
The Goal: to create a fixed background position in a transformed element that works in Firefox.
I have tried all solutions on this page (and a handful of others), but none have worked:
Fixed attachment background image flicker/disappear in chrome…
Robert
- 744
- 1
- 5
- 15
7
votes
1 answer
Background-attachment: fixed not working on android/mobile
I'm developing a cordova app and I'm trying to get a fixed background. Unfortunately, it doesn't seem to be working, and anytime I scroll down the background simply goes off the top of the page. Here's the CSS I'm using to do this (and I've tried it…
Nathan
- 390
- 1
- 2
- 10
5
votes
3 answers
css background attachment and font
I have a really weird problem with my background. When I change background-attachment to fixed in css, font in my menu becomes smaller for some reason that I can't figure out. When I changed it to scroll or local it gets back to supposed size. Any…
user1034842
- 89
- 2
5
votes
5 answers
background-attachment: fixed breaking with translateX(0)
I have a scrolling element with a fixed background:
.my-element {
background: url(/foo.png) no-repeat right bottom;
background-attachment: fixed;
}
It works great! Normally. However, if I apply a translate transform (even of 0) to it (which I…
Nathan
- 73,987
- 14
- 40
- 69
4
votes
1 answer
CSS Fixed background scaling / panning not playing nice with iPad
I have used the search function thoroughly and have not found any answers relevant enough to fix my problem.
On my new website, I am implementing a single fixed background image (roughly 250x250px), set to follow the user as they scroll down the…
user3681673
- 41
- 2
4
votes
2 answers
Alternatives to background-attachment: fixed
Since background-attachment:fixed doesn't work on some mobile browsers (e.g. on iOS), what alternatives are there, specifically when trying to implement the following demo: http://cppforums.ludost.net/test/test.html
CSS:
.sec1 {
min-height:…
Martin
- 111
- 1
- 10
4
votes
2 answers
Does anyone know a hack to "fix" broken `background-attachment: fixed` after a CSS3 transform?
I have a node that has background-attachment: fixed applied to it. The fixed background "breaks" if it follows a node that has a -webkit-transform applied to it, and I'm looking for a hack to fix that if anyone knows of one (e.g. there are multiple…
user578895
4
votes
4 answers
Stellar.js background attachment set to fixed but crazy jitter still happening
As the title suggests, I'm using Stellar.js. I only have one parallax element, and it's very simple. It's a section with a background image. The background image is set to fixed (like the documentation says to do to avoid jitter), but the image is…
trevorhinesley
- 845
- 1
- 10
- 36