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
1
vote
2 answers
Background image won't scroll with content
I am encountering an odd CSS issue that is a real headscratcher for me. No matter what CSS I apply, my background image will not scroll with the content on the page. This is what I've set as the body CSS:
background-repeat:…
bjornfloki
- 296
- 2
- 4
- 15
0
votes
0 answers
Can a fixed background-image that's clipped to text scroll in Firefox?
In all modern browsers, the background-clip: text style will cause the background to be clipped to the shape of the text in the element (MDN). Scroll the rendered result and the background-clipped text moves along with everything else on the…
Impirator
- 1,393
- 1
- 12
- 24
0
votes
0 answers
Css parallax with translatez images overflow container
I'm trying to implement parallax effect similar to background-attachment: fixed. And everything works fine if only the first element has translateZ, but if 2 or more sections have translateZ property images begin to overflow sections. Could anybody…
Bxleinx
- 1
0
votes
0 answers
How to implement background-attachment: fixed on iOS
I'm trying to implement CSS "background-attachment: fixed" effect on iOS, but faced with problem when user scrolling content, image flickering ( sometime ) and can't understand why it happens.
I used the hack from this article…
Andrew Ustimenko
- 31
- 1
- 4
0
votes
0 answers
CSS: How to have several fixed background videos on same page
Ever since the property "background-attachment: fixed" has been introduced, we've been able to put several fixed backgrounds at different places of the same page, which gives really cool effects.
However, as far as I know, video backgrounds don't…
Ben Viatte
- 485
- 1
- 5
- 16
0
votes
0 answers
Fix for `background-attachment: fixed` + `background-size: cover` on iOS
A background-image stretches the height of the div rather than being contained to the dimensions of the viewport. Testing on desktop the desired effect is achieved but on iPhone X (Safari and Chrome) the background stretches the height of the…
user1406440
- 1,329
- 2
- 24
- 59
0
votes
1 answer
Honeycomb css design with background-attachment: fixed and css transform issue - image not spanning across hexagons
I have a honeycomb css design and i am struggling to get the background image to span across all hexagons. At the moment the image repeats in each hexagon. I think there is a conflict between the css transforms and the fixed background.
Here is my…
Andy Mikellides
- 15
- 4
0
votes
1 answer
How to make background image stay while text scrolls? (Safari)
Before you try to close: I know that there are similar questions and answers out there, however none of these solutions work for me, rather just locking scrolling all together. This could possibly be because I am using a website template from…
Matthias
- 170
- 15
0
votes
0 answers
why does background-attachment works differently in body and div
I created a background and attached to body it is scrolling to the right fine. but when I attach to a div it doesn't seem to be attached. the scrolling happens in the body.
Here is the link when attached to the body
background-attachment:…
coool
- 8,085
- 12
- 60
- 80
0
votes
1 answer
How do I make local attached repeating linear gradients
I've recently been trying to make a text area that uses a repeating linear gradient to separate lines, however, the gradient does not attach to the textbox when I'm scrolling.
Am I doing something wrong?
By the way, here's the code:
MisterJuanXDLOL
- 85
- 5
0
votes
1 answer
How to stretch image with background-attachment: fixed to a transform: scaled div?
I have a center div which has a background image and content, which is also scaled to fit some devices.
So div has transform: scale(1.5), which has a background with background-attachment: fixed; to keep the background in place. But I cannot figure…
Denny
- 1,766
- 3
- 17
- 37
0
votes
0 answers
How does background-attachment work with its children?
I was looking for how to generate the new glass morphism effect with CSS3. Afortunatelly I found This article that make it happens. In the first method the article makes something like this (I wrote this code with the same structure and…
JORGE GARNICA
- 1,016
- 2
- 9
- 13
0
votes
0 answers
Safari "background-attachment: local" scroll bug
I'm creating a menu with knockout text links. The issue is that on Safari (14.0.2 and possibly prior versions) I can't scroll this menu. If you take a look at DevTools links' rectangles, they are actually moving, but text remains on the same…
0
votes
2 answers
background attachment:fixed how to make the image "not full screen"?
Hey I am trying the one thing my friend want me to do but I am still new in this. I was trying to do the parallax effect on image with js but it just didn't work so I settled with the backgroud attachment - fixed but there is still a problem. The…
user1049069
- 17
- 1
- 5
0
votes
1 answer
Using jQuery to change element background image does not work with Fixed background attachment
I got a weird issue here, basically I just want to make a slider, each slider-item has inner child named slider-background, it contains data-src custom attribute of image's url / path that then I use jQuery to change the background-image of each…
Hernanda
- 57
- 7