background-attachment

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 of the modal panel is slightly masked. I have successfully used border: 10000px rgba(0,0,0,0.3) with border-radius: 10010px but this is a hack, and I can't outline the modal with a box-shadow Is there any standard way for doing this? Bonus points if you can think of a way to apply a transparency filter gradient to an image. I think the best option you got here

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: 1000px; background: #222 url('wallpaper-2959361.jpg') no-repeat center top fixed; } .sec2 { min-height: 1000px; background: #222 url('wallpaper-1829278.jpg') no-repeat center top fixed; } HTML: <div class="sec1">text</div> <h1>Title 1</h1> <div class="sec2">more text</div> <h1>Title 2</h1> <div class="sec1">even more text</div> Any suggestions on how to

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 several other ways): html { width:100%; height: 100%; background-color:#000000; background-image:url('../img/bg_reader.jpg'); /*background-repeat:no-repeat; background-attachment: fixed; background-position: center;*/ background-size: 100% 100%; } No matter what, the background scrolls off the top of the screen when I scroll down as if the fixed

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: url('http://www.wallpapereast.com/static/images/001_Fish-Wallpaper-HD_hkNsK33.jpg'); background-size: cover; background-attachment: fixed; } <div></div> if you remove transform from CSS it starts to work. Reproducible only in FF. background-attachment:fixed; doesn't work when any 'transform' is applied and that's a bug in firefox and it is not yet fixed. Reference: https://bugzilla.mozilla.org

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: fixed; If another element is fixed and has a child video element it causes the element with the background image to disappear. Now it works fine in Safari (and Firefox and IE) so it's not exactly a webkit issue. I've applied several properties that have been suggested to no avail. -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0)

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 disappeared while the transformation is being done, only on Google Chrome. Remedy? This has been a very common unsolved mystery. Recently I had the same problem, and '-webkit-backface-visibility: hidden', proved to be less than useless (on my 'fixed' attached background), since the background just disappeared when it was set. ( Additional Info: the