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
3
votes
1 answer
CSS background-image Not Fixed
I'm trying to do a simple background-image that will stay in place when I scroll down the page. The background image won't stay in place. I've set the background-attachment to fixed.
See: www.emergencydatascience.org
My CSS code:
background-image:…
Richard Trinh
- 379
- 1
- 4
- 10
3
votes
2 answers
Background Attachment Fixed—Google Chrome
Currently on Firefox and Safari the background-attachment: fixed property is working, but is not responding on Chrome.
Here is the page that works in FF & Safari
http://prestonmcpeak.com/work/enigma.html
This is the desired effect I'm looking for…
Preston McPeak
- 35
- 4
3
votes
0 answers
Setting background-attachment:fixed and still use background-position
I'm trying to position a background cover image at the bottom left of the image (background-position: 0% 100%;) and at the same time fix the position so the image doesn't scroll.
The problem is, background-position is being ignored when…
Brad West
- 943
- 7
- 19
3
votes
2 answers
CSS Background Attachment Scroll/Fixed and Background Size cover
Why is background-size:cover different if background-attachment: scroll or background-attachment: fixed used?
Example:
http://jsfiddle.net/enriqg9/Yn43U/
enriqg9
- 1,455
- 1
- 21
- 40
3
votes
1 answer
background-attachment:fixed and background-size: cover makes images dissapear in Chrome
I think this is a common issue with Chrome but I could not find a workaround.
See my code here (jsfiddle)
The first two background images are shown but the background images of #sec3 and #sec4 don't appear in Chrome on Mac OS. Firefox and Safari…
Dafen
- 1,122
- 1
- 9
- 26
2
votes
0 answers
Background-attachment fixed with transform not works in Firefox 2018
Hello everybody I have a problem with my code under, background-attachment fixed work only when I remove transform: rotate() in Firefox and IE instead working great in Chrome.
This is my HTML
This is my…
android.replay
- 31
- 4
2
votes
1 answer
Repeat background with fixed background attachment and rotated container?
Is it possible to get seamless pattern repeat with following conditions?
Idea is to have one rotated background with fixed attachment. I think this is how is supposed to be working, but are there any ways of achieving that?
body {
padding:…
Bogdan Dogaru
- 21
- 3
2
votes
1 answer
background-attachment: fixed not working in firefox
I have the following site:
https://dasproject.netlify.com/lisa/
edit: doesn’t have the problem any more
When opening it in Chrome, the cover-image is fixed, as it should be, but when opening in Firefox, the background-attachment: fixed doesn't…
Emil Bruckner
- 21
- 7
2
votes
3 answers
Center Background Image of a Bootstrap Column
I want put the background image of my second Bootstrap column in the center of the column. However, right now, it is in the center of the whole view and not at the center of the column.
Here are my codes:
HTML:
shriekyphantom
- 143
- 1
- 4
- 19
2
votes
3 answers
Background-Attachment: Fixed Doesn't Work On iOS
I'm trying to find a solution to the problem I'm having with fixed backgrounds on iOS devices. I would rather not have to redesign everything for this website, and I'm hoping that some CSS changes can fix it. This is what the site looks like on…
Jordan U.
- 313
- 1
- 5
- 16
2
votes
2 answers
CSS -- transparent "glass" modal, everything else darkened
THE ANSWER: background-attachment
----- JSBin Example ----
The answer is to use background-attachment
ORIGINAL QUESTION
I'm working on a project where we want to display a modal that "sees through" to the backdrop, but everywhere outside…
neaumusic
- 10,027
- 9
- 55
- 83
2
votes
2 answers
Choppy scrolling with "background-attachment: fixed"
I'm having issues with background-attachment: fixed. When I apply it to the elements on my page it creates a very choppy scrolling effect. Essentially not something that is not a good experience for the user.
My code is here:
HTML
Reskk
- 187
- 2
- 4
- 10
2
votes
1 answer
Text scrolling contained within background image?
I have 2 background images I want to scroll, and I want the text to stay within the background image as it scrolls.
Right now the text is just laying on top of the images as it scrolls, and It's not very crisp. I've been researching for a few hours…
Thomas T.
- 45
- 1
- 7
2
votes
3 answers
How to replace Background-attachment:fixed on Mobile?
I have various sections on my website that offer a "parallax" style effect on backgrounds, this is disabled on many mobile platforms.
I wanted to use some jQuery or javascript to replace all instances of the style "background-attachment:fixed" for…
user1117617
2
votes
1 answer
Jumpy behavior on Android
Using full width and full height on background images for sections of my site but I'm experiencing some jumpy behavior on Android. I'm using modernizr to detect touchevents and changing the background-attachment from fixed to local. Here is the site…
brandozz
- 1,059
- 6
- 20
- 38