Hello, background images are set to always match the device screen. Which in some cases, you are right, might cause issue on mobile screens because of differect aspect ratio.
What CMP Theme are u using? – also what is your website URL?
– I can send you some media queries which might help.
Alex
Hi Alex, I’m not using a CMP theme, I’m using the StudioPress theme, Boss Pro (on the Genesis framework). And my URL is https://meganwallace.com.
Thank you!
Megan
I meant template from our CMP plugin – but I can see it is a default Hardwork.
I would suggest to replace your background image on mobile devices, simply replace the image below – which you set in CMP settings – with URL of your image which can be used on mobiles to fit the different aspect ratio.
Hope that helps!
@media only screen and (max-width : 1024px) {
#background-image {
background-image: url('https://meganwallace.com/wp-content/uploads/LH_Coming-Soon.png');
}
}
Thank you! I created a coming soon 375×667 image and uploaded it and my code looks as follows but it’s not working:
@media only screen and (max-width: 1024px) {
#background-image {
background-image: url(‘https://meganwallace.com/wp-content/uploads/Coming-Soon_375x667.png’);
}
}
Any ideas? Thanks!
@media only screen and (max-width : 1024px) {
#background-image {
background-image: url('https://meganwallace.com/wp-content/uploads/LH_Coming-Soon.png')!important;
}
}
Oh yes, !important attribute was missing, please use this code which works correctly.
Cheers Alex
