0

I've never before run into a CSS problem I couldn't seem to figure out, but I'm just baffled by this one. I have a element in which I'd like to have a fixed background image, and I'm intentionally using an image that's quite a lot larger than the element because I'm not using media queries for this particular project, but rather just want to have the image scale to the element width. For some reason, however, when I switch the background-attachment to fixed, the image uses the boundary of the parent element as it's reference point.

I'm using the Foundation 4 framework (I use it all the time), and as such the parent element is a row class, so that's worth noting, but I can't figure out what about that might cause this problem. Here's the style definition I'm using (I've broken the background declaration apart for trouble-shooting). Ideas, anyone?

#page-content {
  min-height: $publicContentHeight;
  background-color:rgba(255,255,255,0.25);
  background-image: url('../img/paper_phren/pages.bg.fludd.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size:contain;
  background-attachment: fixed;
  box-shadow:0px -5px 10px rgba(0,0,0,.3);
}
4

3 回答 3

1

Hard to say without seeing your use case, but I've found that background-size doesn't work well for scaling an image to fit the width of any screen size without overflowing it's container. What most seem to do, and what I've now adopted, is just using an img element for the background. Yes, it's not as semantically accurate, but the control you gain is beyond worth it. Microsoft.com along with many others are using this for scalable background images.

于 2013-10-25T19:00:42.067 回答
0

Are you trying to fill the element and therefore don't mind if the background image scales outside of the element on either the height or width depending on the ratio? If yes, try: background-size:cover;

于 2013-10-25T17:30:40.410 回答
0

Foundation + off-canvas + chrome + background-attachment: fixed = problem. Or so I have heard....

http://foundation.zurb.com/forum/posts/1799-an-off-canvas-story "1- Only in chrome for windows(or so internet say): background-attachment: fixed behave wierd with animations. Specially if you wrap a self animated offcanvas around all your fixed backs. Notice: this has nothing to do with Zurb, but with chrome."

于 2014-04-17T05:54:46.177 回答