Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hello,
this is the code that wordpress creates
body.custom-background {
background-color: #1e1e1e;
background-image: url("http://url/wp-content/uploads/2017/07/bodybg.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}only firefox for android displays the image. opera mini, opera or google chrom don’t. Is this a browser, wordpress or theme (north) bug?
Update:
It seems to be a problem of theme north, or this possibility is not supported in theme north
I installed 3 differnt themes (oneway, zerif lite, sydney) they all display the background image on mobile devices.
could you fix this bug? It’s really anoying that a simple html element isn’t working with in that theme!
Or is this a premium feature using a background image?
Hi Cyclist030,
This appears to be a general WordPress issue. You can fix this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
@media (max-width: 650px) { body.custom-background { background-attachment: scroll; } }You might also need to install the SiteOrigin CSS Editor.
All premium features are marked.
thanks Alex but that code don’t work!
On phone and tablet still no image displayed.
If it is a problem of wordpress, why does it work in other themes which I have mentioned above?
Regards
Hi Cyclist,
Oh. Sorry, the provided CSS is being applied after the customizer CSS which is so the CSS is actually getting ignored due to when it was output. Please replace it with:
@media (max-width: 650px) { body.custom-background { background-attachment: scroll !important; } }I’m not familiar with the other themes on a code level to answer that question. I will, however, state that this sort of issue is a common issue associated with fixed backgrounds in general (if they’re set to cover and fixed) and WordPress doesn’t account for it by default. it’s quite possible the other themes are, but again, I can’t state if that’s the case or not.
Can you link me to a website where I can see one of the mentioned themes with this setup? I’ll be able to tell you why it’s not occurring for them.
Hey Alex,
thanks for your reply and effort to help me out.
First I have to correct my statement about other themes display bg-image on mobile devices. They don’t!
Only if I set to background-size: auto; But your second Solution does not work too.
Now I understand that it is a general problem on mobile devices with cover and fixed.
So I have googled a bit and I found an intresting discussion on stackoverflow and some solving approaches.
I use this code and it works, so far on Android 5 and 6 on phone and tablet. So far I have not tested it on ios devices.
body:before { content: ""; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -10; background: url(photos/2452.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }It’s not 100% perfect, cause the image jumps a bit if I wipe up or down the site.
I would be interested in what you think about this solution(s).
Best Regards from Berlin