Stack Overflow
Stack Overflow

Questions tagged [background-attachment]

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

106 questions
2
votes
2 answers

Fixed to window, but contained inside container

I have some HTML set up like this:
Welcome!
The cover element is uses…
Qub1
  • 1,154
  • 2
  • 14
  • 31
2
votes
1 answer

CSS background-attachment and size

I am trying to make my image scroll with page inside its container, but not make it fixed (I need it do go up and down with scrolling, to put it that way :)). I already know that setting the image as a background and setting the…
dzenesiz
  • 1,388
  • 4
  • 27
  • 58
2
votes
1 answer

Attach an image to the top of the page, no scroll for img, in the body element

I have the following problem. I think, there is a quick way to do it, but right now I cannot find the way to solve it. So, I have an image and I want it to be as a background image ONLY on the top of the page in the element. Currently it is…
Alexander Teshabaev
  • 100
  • 3
  • 15
2
votes
1 answer

background-attachment:fixed bug in Chrome for Retina only

While using background-attachment:fixed, I am finding issues with how Chrome is rendering the background image on retina screens only. Firefox and Safari work as intended. I have also noticed that I can get it to work in Chrome when I click the…
crowdediceb0x
  • 45
  • 6
2
votes
1 answer

CSS 'background-attachment:fixed' is very laggy

This is question has been asked before but with little fanfare/with little insight about how to fix it or any workarounds. Plus it has been 2 years since and I figure it's a good time to re-investigate: Stack Overflow Question: How can I prevent…
JVG
  • 20,198
  • 47
  • 132
  • 210
2
votes
1 answer

ie 11 wierd shaking on scrolling

I have a Issue. I'm currently working on a site but decided to not really pay attetion to IE since its an one page site and we have a selected audiance so we decided IE isnt a main priority. Now I was doing some testing in ie 11 just for fun and…
Merijndk
  • 1,674
  • 3
  • 18
  • 35
2
votes
1 answer

Simulate the same effect as background-attachment fix for SVG text fill property

I have an SVG with a Hello however, when scrolling I would like to get a parallax effect with the background by doing the same I would on a div setting its background with background-attachment:fixed. Is there any way…
zanona
  • 12,345
  • 25
  • 86
  • 141
1
vote
2 answers

Jumbotron Fixed Image Jumps

I'm coding a website for a friend, but the jumbotron background image keeps jumping when I scroll down the page. Can someone please explain to me what I am doing wrong? Thank you. Codepen link here: https://codepen.io/Bekahlea/pen/bGqNaVo .jumbotron…
Rebekah Jarrett
  • 11
  • 5
1
vote
1 answer

What does background-attachment exactly do?

I was thinking when we write background: inherit; it should take all of parent properties exactly and according to it, the background of child element should be reproduced,right? But today when I worked with background-attachment I faced with a…
milad
  • 1,854
  • 2
  • 11
  • 27
1
vote
2 answers

CSS background fixed + cover stretches the picture (not covering properly)

I am using fixed background images in my ReactJS website. The image I am using in header area is getting weirdly stretched (zoomed-in, only a small part of picture is visible) even though the same CSS properties for different elements work…
Faire
  • 706
  • 1
  • 9
  • 31
1
vote
2 answers

background-attachment: fixed in Firefox or Edge versus Chrome

body { height: 150vh; } #hero { position: relative; border: none; height: 100vh; } #hero .hero-image { background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131); …
Armadillo
  • 457
  • 1
  • 9
  • 17
1
vote
0 answers

Share background image between elements using CSS or TailwindCSS

I'm trying to make something like this on Tailwind or pure css... So basically we could share some background between elements with some css similar like this (we use this class on each element): .item { background-image: linear-gradient(to…
Tadeo Rod
  • 574
  • 5
  • 11
1
vote
0 answers

CSS background-attachment local and position bottom problem with Edge/IE

I'm trying to show a gradient at the end of a scrolling content by using a linear gradient with background-position: bottom and background-attachment: local. This works great in all browsers except IE and Edge. I could just accept it as is if it…
yesman82
  • 431
  • 1
  • 3
  • 12
1
vote
0 answers

CSS background-attachment: fixed; breaks when Chrome tab is dragged to larger monitor

I'm trying to implement a parallax effect and it's working perfectly in my smaller monitor but when I drag the tab over to my larger main monitor to see it there it immediately doesn't work. The image, instead of remaining fixed, scrolls with the…
DoubleDurian
  • 41
  • 1
  • 3
1
vote
1 answer

Background-attachment:fixed equivalent for IMGs

I'm trying to find a CSS-only equivalent effect of background-attachment:fixed that works with inline IMG elements. I've tried position:fixed, but removing the image from the document flow will not work in this instance. Here's my…
user2009300
  • 57
  • 1
  • 7
1 2
3
4 5 6 7 8