It might be helpful to know what problems you are seeing and what you would like to happen (realistically) ?
You are using background size cover which will make the image cover the area specified but unfortunately mobile viewports can’t handle the background attachment fixed. Instead iOS mobile will stretch the image over the whole document and not the element in question.
You could use a media query for smaller devices and lose the fixed attachment and just let the image scroll.
It may be possible to work around the issue but I’d need to see the site in question as the workaround is limited in scope.
If your issue was art direction related then you could again use media queries to change the image for smaller devices.
It’s hard to give a good answer without seeing the page in action
Here’s a couple of examples using your code (although I removed prefixes as they are no needed for modern browsers).
This first example uses the ‘any-hover’ media query (modern devices only) to detect if a device has hover capabilities. If so we can assume that devices that fail that test will be touch only and most likely therefore be mobiles or tablets (there will be the odd device that gets missed but in the scheme of things will be a very small margin for error).
Now that we have detected mobile we can let the mobile device scroll in the normal way and the image will cover the element’s area only (and not the whole document due to mobile limitations with the viewport and fixed attachments).
Another method that can be utilised for all devices is as mentioned before to use a fixed positioned element instead of background-attachment:fixed but the caveat for this example is that you can only do it for one element and not multiple elements.
The following example uses the :after element on the body to place a fixed positioned container of the correct width and height to match the ‘divbg’ that you were using. The fixed element can then have a normal background image and does not need background-attachment fixed because the element is already fixed. The image will cover the area in both mobile and desktop.
As you can see both methods work the same in desktop. In the first method the image scrolls away on mobile but in the second example mobile will work the same as desktop. As I said the caveat with the second method is that you cannot do this for multiple images if you were intending some sort of parallax effect.
The only other solutions would be to use js for the parallax effect.
Whether the image is centred will depend on what you mean by centred. A mobile viewport is not the same aspect ratio as your image so the image will be cropped in some way so that the area is covered (that’s what background-size:cover does). If the focal point of your image is central then it will be centred on the device you view it in assuming you have set the vertical backround-position to 50%.
In the code you posted you only set horizontal to 50% and vertical to zero so you can’t expect vertical to be central also. You need to use 50% 50%.
e.g. background-position: 0px 0px, 50% 50%;
The demos I posted above will central nicely on the iphone and will look like this screenshot.
If your example doesn’t look close to the above then you will need to post full code and images or a link to the site in question so we can debug further.
It may be that you are using an unsuitable image and trying to force a square peg into a round hole. Perhaps you need some ‘art direction’ by changing the smaller screen image to a differently cropped image with better focal points.
When you use one image for large and small devices you have to choose the image carefully. Look at my example and see how the focal point remains in view at all screen sizes because I used a suitable image.
Here’s a screenshot from my old iphone5 with everything working nicely.
Thank you for the quick reply. Yeah your code is working just having problem on my end I need to figure out in my local. Thank you for the suggestion I will try again.
