CSS background-position in Mobile Safari

In my most recent web-app, I have created a background image that I want to be displayed statically, taking up the whole screen and having the content scroll over the top.

Using the ‘background-position: fixed;’ worked fine on desktop browsers, but when it came to Safari on iPhone, this line of code became irrelevant. Safari does not accept scrolling the same way as how you would do it in a desktop browser. It thinks you are moving the whole page within a viewport and therefore the background-position tag is not relevant, as the page is moving within the viewport rather than the content scrolling within the page.

This is a wrapper to apply the CSS to as my background was in body, which seemed to have even more problems when it came to mobile Safari. This wrapper was placed inside the body.

#background_wrap {
 z-index: -1;
 position: fixed;
 top: 0;
 left: 0;
 background-size: cover;
 background-image: url('../images/compressed/background-mobile.png');
 background-repeat: no-repeat;
 background-attachment: scroll;
}

@media only screen and (max-width: 750px) {
 #background_wrap {
 z-index: -1;
 position: fixed;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 background-size: cover;
 background-image: url('../images/compressed/background-mobile.png');
 background-repeat: no-repeat;
 background-attachment: scroll;
 }
}

Next, the CSS code. I have created a media query for the mobile site so that the code does not impact the desktop. The desktop version currently uses the image to cover the whole screen and the background attachment works.

As I like how this looks currently, I have created 2 separate IDs so that they apply to mobile sized screens only, but you don’t have to do that.

position: fixed; background-attachment: scroll; and background-size: cover; are the main components to getting the background to look like the first image (mobile) and enable the scrolling as well. You can play around with them, but it took me a while to get to this stage without messing up other areas.

Awesome Newsletters

In the office, I get in really early to have some peace and get down to work without interruptions. On a Friday, we get the day to innovate and have some time for our own personal development. As it’s quiet in the morning, it’s good for a spot of research! There are a few newsletters that I subscribe too and some of them come out on a Friday morning (yay), so it’s good for an hour’s reading time while gaining new skills that can help me during the work week, so saving time in the long run.

There’s so many sites to subscribe to but I’ve found some really good ones with some interesting reads into UX, graphic design and front-end programming.

http://www.smashingmagazine.com/

These guys also have some excellent books available too. A once a week newsletter that has clear formatting and links, very easy to read. Shows aspects of UX, HTML tips and tricks and much more. My favourite one by far.

https://www.behance.net/

I love Behance. If you don’t have a Behance account and want a professional portfolio and somewhere to see others work, please get one. So many creatives in one place. Behance don’t send e-mails as frequently, but they share some amazing work and interesting articles. Check out my Behance portfolio: https://www.behance.net/lgoddard9

http://responsivedesignweekly.com/

Responsive design is something that we’re very into right now. This publication shows how responsive design is constantly improving, the UX behind it and more. This is very good for blurring the lines between UX and Developer, so works great for me.

http://blog.invisionapp.com/

Not only is the newsletter for this great (generally tutorials and interesting articles) but the app and website are also an excellent prototyping tool – would definitely recommend using this for rapid prototyping.