Website background in Safari issue...

sticker

Hey there,

I'm banging my head against a wall with a coding problem. I've developed a website with a large background image to allow scrollable content.

The page appears fine on most browsers, but on the ipad/safari, this browser presents the full background image in the viewable area, not just the native resoltion of the background image as per the ther main borwsers.

It's important I keep the image background and allow it to scroll down as some pages on this site will be lengthy. Any ideas would be much apporeicated!

Thanks in advance!

Preview: http://websiteworkpreview.com/test/index_test.html

Placebo

background-attachment: fixed;

i would reckon

matt-dublin

thats a nice site, is it a template?

sticker

Placebo wrote: »

background-attachment: fixed;

i would reckon

Hi, Thanks for the VERY quick reply! Where in the code would I add this fix?

sticker

matt-dublin wrote: »

thats a nice site, is it a template?

Partially, I sourced the underlying css/js framework from another coding develper but designed portions myself... Still in the early stages though!

Placebo

just had a look at your code, firstly, i would recommend against something like this : http://websiteworkpreview.com/test/images/body-bg-sh.jpg

theres no provision for longer pages, [technically there is, but it will be more trickier to accomodate] -also on that note it is said that its better to have images come in as 1 http request rather than several, but i think that works best for icons and smaller bits,

anyway back on point, few ways here, i would recommend having the brownstrip at the top on its on

then the wooden background can have an attachment fixed on whatever div its in OR you can use multiple backgrounds, one for the top, one for the bottom [no repeating] and one for the middle which will be repeating [youll have to slice them up intelligently] i used multiple backgrounds here: http://iamjpg.com/acute/
css:http://iamjpg.com/acute/css/style.css

sticker

Placebo wrote: »

just had a look at your code, firstly, i would recommend against something like this : http://websiteworkpreview.com/test/images/body-bg-sh.jpg

theres no provision for longer pages, [technically there is, but it will be more trickier to accomodate] -also on that note it is said that its better to have images come in as 1 http request rather than several, but i think that works best for icons and smaller bits,

anyway back on point, few ways here, i would recommend having the brownstrip at the top on its on

then the wooden background can have an attachment fixed on whatever div its in OR you can use multiple backgrounds, one for the top, one for the bottom [no repeating] and one for the middle which will be repeating [youll have to slice them up intelligently] i used multiple backgrounds here: http://iamjpg.com/acute/
css:http://iamjpg.com/acute/css/style.css

Many thanks for taking the time to help...! I'll investigate the options you suggest.