Issues with background repeat on iPhone etc

HTML & CSS
1

Hi,

I have a site where there is a large background that is static and non-repeating.

		
                background-color:#000;
		background-image:url(../images/bg_large.jpg);
		color:#FFF;
		background-repeat:repeat;
		background-position:top fixed;
		background-attachment:fixed;

During cross browser checks its all looking good

However on iPhone (and other mobile devices I am sure), the background repeats itself when scrolling down through the page.

What do I need to add to make the background stay static on the iPhone / Ipad etc. ?

2

It is repeating actually because you told it to do so here:


    background-repeat:repeat;

You would need no-repeat to stop it repeating:


    background-repeat:no-repeat;

However as there is no fixed positioning on an iphone so you will only get the image once and it will scroll away with the page. Maybe you could add a background-color for the iphone or merge/fade the image into the background-color at the bottom for a smoother effect.

There is no fixed value for background-position and you probably meant this:


  background-position: 0 0;
  background-attachment:fixed;

You may be able to find a JS solution.

3

thanks :slight_smile: