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
1 answer
Linear gradient is not working when used with "background-attachment: fixed"
I am trying to make a linear-gradient with percentage breakpoints while using "background-attachment: fixed". It is not working as I expected.
I've made a very simple fiddle about my question.
https://jsfiddle.net/f8v1h0ac/
HTML
…
ozanilbey
- 13
- 4
1
vote
2 answers
background-attachment: fixed on mobile
I'm trying to set a background image for an spn web app and I need the background to be fixed (that it won't be scrolled with the rest of the page).
this is the body css:
body {
background-color: rgb(51, 102, 102);
background-image:…
Gil
- 55
- 7
1
vote
4 answers
Choppy JavaScript Animation of background-position-y
So the actual problem I'm having is that I want a fixed background image effect while keeping the background image wide enough to fill a container. Unfortunately, the CSS way, using background-attachment:fixed; will only position the image relative…
Alex W
- 37,233
- 13
- 109
- 109
1
vote
1 answer
Firefox transform and background attachment fixed not working
I'm working on a full width, parallax type page with skewed sections. The trouble is in Firefox the transform:skew() seems to mess up the background-attachment:fixed property. It works in Chrome, Safari and IE11 but not Firefox.
Does anyone know of…
Vitali
- 11
- 4
1
vote
1 answer
How can we fix "background-attachment: fixed" in mobile devices for parallax designs?
I'm implementing parallax scrolling in my website, but it is not working in the mobile devices, I don't know how to implement it for mobile devices. I think this is because, the mobile displays are touch screens, so we have to use fingers to scroll…
Naresh
- 862
- 3
- 12
- 35
1
vote
0 answers
CSS: background-attachment: fixed and border-radius
I have a website with a large background image. Now I want to add circle buttons/links that also have background images.
It renders fine in Chrome and IE, but Firefox shows an ugly box with the same background-color that the has.
The problem…
Ginchen
- 790
- 7
- 20
1
vote
2 answers
background-attachment:fixed not working with slick slider in chrome
I've create jquery slick slider. In which I want background-attachment:fixed. It's working fine in moz, IE but not working in google chrome.
Please find fiddle demo
HTML:
…
Ganesh Yadav
- 2,607
- 2
- 29
- 52
1
vote
0 answers
HTML/CSS Multiple fixed backgrounds without Chrome repainting
For a layout such as this: http://codepen.io/anon/pen/dPwQod
HTML:
ilia
- 329
- 3
- 11
1
vote
2 answers
background-attachment: fixed not working on Safari
I've got the following code running on an element that spans 100% of the browser:
#section_white {
background-attachment:fixed;
background-image:url(image_url_here.jpg);
background-position:100% 100%;
background-repeat:no-repeat no-repeat;
…
Tiny Giant Studios
- 1,125
- 3
- 12
- 27
1
vote
1 answer
how to background-attachement: fixed to a div not viewport
I have a large background cover.
...
And the CSS
#cover {
background:url('cover.jpg') no-repeat fixed center center / cover;
height: 350px;
width: 100%;
}
The expected output : The background image, resized…
Kalzem
- 7,320
- 6
- 54
- 79
1
vote
1 answer
background-attachment:scroll and background-size:cover not working
I have a background image that I want to be fixed on larger screens and scroll on smaller devices.
This works great...
#main_page {
height: 100%;
min-height: 100%;
background-image:url('url');
background-position: 50% 50%;
…
Matt
- 424
- 4
- 11
1
vote
0 answers
Fixed position background on iPad
I have a div with a background-size:cover and background-attachment:fixed. This works fine except for on iOS.
#featured {
background:url(img/mountains.jpg) center bottom no-repeat fixed;
background-size:cover;
padding-bottom:65px;
}
The…
LBF
- 1,133
- 2
- 14
- 39
1
vote
2 answers
Background-attachment: fixed image fluid to a certain point
My background image is fluid only to a certain point. When resizing the browser it starts to shrink
background-image : url("http://...");
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center…
Tomas.R
- 715
- 2
- 7
- 18
1
vote
2 answers
Background fixed & cover - Internet explorer 11
http://apolytos.com/new/img/test.html