background-attachment: fixed not working on Safari

css safari cross-browser background-attachment background-size
Tiny Giant Studios picture Tiny Giant Studios · Sep 22, 2014 · Viewed 10.1k times · Source

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;
  background-size:cover;
}

What I need to do is to have the image span the entire width of the browser, while remaining fixed (thereby allowing the content to scroll on top of it).

It seems to work on all the browsers except Safari - any ideas what I'm missing?

I've tried setting the element height and min-height to 100%, with no joy.

A link to a demo page can be seen here: http://oscarsarc.tinygiantstudios.co.za/adopt/adopt-nationwide/

Answer

Tiny Giant Studios picture Tiny Giant Studios · Sep 22, 2014

Turns out Safari for Windows is no longer supported (how did I miss this?!) and the one I'm using is far too old to be useful. Using OSX / Safari, things look peachy (according to Benjamin)

Related questions

Safari and IE can't read TTF and EOT fonts

I have trouble reading a font in Safari. I converted OTF to TTF - two bold and regular fonts. Both are fine in Chrome and Firefox. But in Safari, only the bold font is works, regular does not. IE does …

Read More
CSS cursor:pointer in mac Safari doesn't work

I have placed cursor:pointer on a td but in Safari (on a mac) it only displays the default mouse cursor instead of changing to the little hand pointer which it does in every other browser. Is anyone aware if …

Read More
How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More