I am looking for a fix to: background-size:100% 100%; and background-attachment:fix

**WebDizzy777** · 12-20-2012, 01:40 AM

I am looking for a fix to: background-size:100% 100%; and background-attachment:fixed;

Here is basically what I have in my style sheet (below) and here is the site url: http://tinyurl.com/d6d6zay

Code:

body {
	background-image: url(my url path to pic.jpg);
	background-attachment:fixed;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size:100% 100%;
	text-align: center;
}

It seems to work fine in all BUT IE7&8 (not worried about 6), and not in screen shots of OSX browsers (mainly not in firefox for osx), but I have windows so don't know first hand. I am more worried about a fix for IE 8 than 7 but a fix for 7 is nice.

After hours and days of research I have found many many filters and fixes and cannot get any to work correctly, so I decided my best bet is background-size:100% 100%; and background-attachment:fixed; and then to ask the experts - you guys.

BUT - here are test pages of what I have tried:

1. Using a body image in HTML and in css adding img class and @media screen. This seemed to be the magical solution, then my partner tells me the image is completely cropped and the riverfront is cut off in chrome, and even more cut off in Firefox, BUT in my firefox and chrome on my computer it displayed fine. his resolution is 1480(around 1480)x768. Mine I tested at 1280(not exactly but around there)*768 and 1480(around)*900. Its fine on mine but not his, we have same versions of ff and chrome and windows... so kinda gave up on this option after the big let down... but here is the url for this option: http://tinyurl.com/d58z2un

2. Using the Alpha Filter for IE and its just all wrong, but there is the link for that test page: http://tinyurl.com/cxs9l2r

Whatever the fix is, my main concern is having a fixed background image relative to the view port, with the content divs in my container scrolling, but the background image fixed to 100% of the window in Chrome 21+, Safari 5+, Opera 12+, Firefox 4+, and IE 8+. And im unfamiliar with Macs all together, but working in Mac would be nice, I just know my screenshots are not coming our right for Mac browsers.

**Beverleyh** · 12-20-2012, 06:30 AM

Lots of css options here: http://css-tricks.com/perfect-full-p...kground-image/ (some methods suit IE7/8 too)

Some js/jQuery options also here: http://www.paper-leaf.com/blog/2012/...ground-images/

All very easy to implement. You just need to choose an option that suits you.

**ajfmrf** · 12-20-2012, 05:32 PM

This one works best as I see it:
http://tinyurl.com/cxs9l2r
The waterfront was in view.And from what you are looking for is what you need.But the other link as reported had the bottom cut off.

I use fire fox 17.0.1