Archived topic
Background Image Doesn't Show Up In Tablet or Phone
20 replies · Started by Mary Pearson on June 29, 2018
I have uploaded a background image for Body. When I click on the icons at the bottom of the page for tablet and phone, the background shows up just as it should, however on a real tablet and phone, the background is missing, so I uploaded smaller images and added the following CSS:
@media (max-width: 768px) {
body {
background-image: url('https://mywebsite.ca/wp-content/uploads/2018/06/background-768px.jpg');
}
}
@media (min-width: 769px) and (max-width: 1024px) {
body {
background-image: url('https://mywebsite.ca/wp-content/uploads/2018/06/background-1024px.jpg');
}
}
@media (min-width: 1025px) {
body {
background-image: url('https://mywebsite.ca/wp-content/uploads/2018/06/background.jpg');
}
}
What am I missing?
Thank you.
Hi there,
I used browser inspect to remove the CSS you've added and the background image is still showing up correctly.
Can you try removing the CSS on your end and let me have another look?
Make sure to clear caching plugin and browser cache as well.
Let me know :)
Thank you Leo. CSS is removed.
I also tried it with all CSS removed but still no image on tablet or phone.
Hmm it seems to be ok using browser resizing but just a background color when I test it on mobile.
Not seeing anything obvious here and we haven't had this reported before.
Can you try #1 here to eliminate any plugin conflicts first?
https://docs.generatepress.com/article/debugging-tips/
Let me know :)
I have done all debugging.
1. deactivated all plugins except GP - no background image
2. turned on WP DEBUG - no errors in dashboard or live site
3. no white screen
4. theme needs GP sections to show background image
5. error_log - no errors.
Can you turn caching plugin off so I can see the source of the code?
Thanks!
WP-Rocket has been deactivated.
Hmm do you have a background color set in Colors > Body?
If so can you try removing it?
The default colour is #efefef and I am unable to remove it so I changed it to a bright yellow to see if that was the issue. It isn't. I can see the yellow in the background and it has nothing to do with the dark blue that is showing as background on the tablet and phone. I can "pull" the blue background down and see the yellow behind it.
I also removed all custom CSS to see if that might be the problem but it had no effect.
Any other ideas?
Very weird.
So what is body background currently set at?
This is what I'm seeing currently in the code:
body {
color: #590b79;
}Which I believe is the problem.
Or did you add that somewhere?
I'm a little confused. Isn't color for text? My text IS #590b79. Shouldn't it be background-color we're looking for?
That colour is purple and I have used it for the colour of my text, but the colour I'm seeing on tablet and phone is (background) dark blue. At times, in the process of building this site I have used the purple for background colour, but I have checked the slider and its background colour is transparent.
I have gone into Customizer and all backgrounds there are transparent or #efefef or #fff.
I have checked settings in my sections and all backgrounds are transparent or white, as they should be.
I have deactivated Colorbox Pro, Envira Gallery, Tablepress and Service Showcase Pro, just in case any of them had it for a background.
ahh yeah sorry my mistake.
Is that all the plugins you are using? I'm not seeing what would cause this so if there are other plugins activated can you try disabling them as well?
Yes I deactivated all plugins initially as per your first suggestion re debugging. I just did it again with those ones.
What happens if you change the background attachment to something other than fixed?
I tried all other options - just did it again to be sure. No change.
