I have a few background image problems on my first client project.
I have set a few background images to fixed, and in the designer and in preview mode things are actually working fine as far as that is concerned. But, when I publish and go on actual mobile devices like an iPhone 8+, LG G7 ThinQ and an iPad Air 2, the background images are not fixed, they just show up as a regular image and the rest of the site content doesn’t slide over the background images like they are supposed to when a BG image is set to fixed. Any idea what the problem could be?
And I also have problems where I have set the hero background image to cover, and it will show up that way in the designer and also in preview mode, but it will show up as tiled on actual mobile devices including an iPhone 8+, LG G7 and an iPad Air 2
Also, why is it when I set a background image to “cover”, it will cover and look fine on desktop and tablet break point, but will not reduce in size for mobile devices?
As you can see, the background image will only resize once from the desktop to tablet break point, but will not continue resizing for the subsequent break points causing the image, in this case the french bulldog, to stay the same size as in the tablet break point and being cut off for the smaller break points. Is this expected behavior? If not, what have I done wrong and/or how can I fix that?
The problem is browser support. Plain simple, mobile browsers don’t play well with background-attachment: fixed. You can try to make it work using position: fixed, but I don’t think it’s a good habit. Just get used to what’s called graceful degradation. This feature doesn’t work but the site works fine without it.
As fot the hero image on mobile, you aren’t setting it to cover here on my end. Since you are using a gradient as a background overlay, you should just set the image width to 100%, and align it to the bottom.
thanks for your help. The background images are set to position fixed, that is why I am not sure why they are not fixed on mobile devices, but I guess, as you said the problem is browser support, which is really too bad. Trying to work around that with div blocks set to various Z-index levels and sliding behind each other with scroll interactions. The problem with that is, that the background images become virtually un-editable in the editor because the edit icon becomes un-clickable.
By the way, some of the hero background images are actually set to cover. When I try to click the “cover” button, it will not select the way it is supposed to. This seams to be a known problem I found out after posting this topic, since someone else posted recently that there is a problem with the “cover” and “contain” buttons not working properly, I found that to be the case as well. I tried setting the home page hero image to 100% width and aligning it to the bottom which caused it to completely disappear below the hero section, what is going on? I have to align it to the bottom and then drag it back into view, which is effectively not setting it to align to the bottom. After doing that I checked on my G7 and the home page hero background image is still tiled. Any idea what the issue might be?
I still don’t understand why setting a background image to cover, will not automatically resize the background images to properly cover on mobile devices…
There are so many issues with the background image settings it’s unbelievable, very frustrating. Setting a background image to 100% height should set it to 100% height of it’s parent element, correct? Well, it set’s it to 100% of the view port height, not it’s parent element! It is almost impossible for me to get the background images looking the way I want and being responsive across all break points.
Since the background image fixed function is not supported for mobile devices I am trying to do a work around by having a div behind the main section sliding up and down with scroll animations. I wanted the image to look like this:
This I have achieved by setting height to auto and width to 100%, works as expected, except that I need the image to be taller than the section so that it doesn’t expose black areas above and below the image during scroll animations, like so:
So I thought I would set width to auto and height to something more than 100% so that the black areas don’t show up. Well, that for some reason doesn’t set it to 100% of it’s parent element, it sets it to 100% of view port height, which is what would be expected if I had used VH, right? As you can see here:
I see that I am not the only one who has problems with background image settings and that people are also posting about that. I would really like to have someone have a look at this as well, not sure if others are having the exact same issues as me, but this is what I have been fighting with for a while now. Does this problem look familiar to you? Any idea how soon there might be a solution for this?
The bug others are experiencing is related to the design changing when another button in the UI is clicked.
This issue you’re having is more design/css limitation related.
For this image specifically, you currently have it set to 100% height so it will fill the parent element. However you also have a move on scroll animation. Because this element is the same size as the “window” through which you see it, moving it up and down is going to show the grey background. This is expected behavior without it’s currently developed.
I’d recommend setting dimensions of your image to be larger like 400px:
Lots of people state this answer/response but I don’t think this is true.
I’ve seen multiple sites (like CNBC.com and others) where static ad images are “fixed backgrounds” as you scroll through the website on mobile (iPhones and iPads).
If they’re “not supported”, it wouldn’t be working across the board, right?
So there must be some code they’re assigning/plugging in to make the background fixed in mobile.
