Background mobile version pixelated - Sydney

Please refer to this link

http://mjborgrealty.com.au/properties/4-House-AUD745000/

If you go on this link on a mobile device you’ll notice that the background is very pixelated and distorted
Is there a CSS code to making this not occur , because on desktop site it is fine, but mobile it is not
Please assist
And also at the bottom you will see there are white boxes how can I remove them so the text inside is visible, or how can I change the text in those white boxes to black?
Thanks :slight_smile:

Hello there,

Please try adding the below CSS code to Appearance > Customize > Additional CSS from your site dashboard.


@media only screen and (max-width:991px) {
  
  body.custom-background {
    background-attachment: scroll !important;
  }
  
}

Let me know how it goes.

Regards,
Kharis

Nope it did not work my friend

Hello there,

Please try this one:


@media only screen and (max-width:991px) {  
  background-size:100% !important;
  background-repeat:repeat !important;
}

Regards,
Kharis

Hi please check http://mjborgrealty.com.au/properties/4-House-AUD745000/
that page on mobile site
i entered in your new code and the background issue is still occuring

Hi this is still not resolved can you please help me , this issue is urgent
thanks so much :slight_smile:

Hello there,

I think you should prepare another image specifically designed for your site background on smaller screen. Then upload it to the media library from your site dashboard (Media > Add New). Then copy its URL path.


@media only screen and (max-width:991px) { 
  background-image: url('http://mjborgrealty.com.au/path/to/your-new-image.jpg');
}

Replace http://mjborgrealty.com.au/path/to/your-new-image.jpg in the code above with your copied image URL. Add this CSS code to your site Additional CSS.

Regards,
Kharis

It did not work
i even tried making it a different image so i can see if that css code makes the image change on a mobile device and it just stayed the same.
I really need this resolved. what else can we do ?

Please check this topic where I’ve suggested scroll background attachment on mobile screen.


@media only screen and (max-width:991px) {
  
  body.custom-background {
    background-attachment: scroll !important;
  }
  
}

It should do the trick. Please reapply this additional CSS code and keep it remains to allow me to dig into it further. Let me know if you’ve done implementing it.

Regards,
Kharis

Hi i have implemented the css code that you just sent me , it is still not working. i have kept the css as you requested.
Please help me resolve this issue, im on an ios device iphone 7 if that helps, but i dont know how it looks with an android device maybe it will be the same. i just want this issue fixed please thanks so much for your assistance :slight_smile: