Background zooms on mobile

http://www.manoroaksha.info/

why, when displayed on mobile, does the background switch to a tiny, zoomed in portion of the original image? all i can see is the top left 10% of the original image filling the entire background.

Hello there,

Please review my reply on this discussion. I hope it answers your question.

Regards,
Kharis

doesnt seem to matter how i manipulate the image, the top left bit of the image gets blown up across the entire screen.

@media only screen and (max-width:768px) {
   body.custom-background {
     background-image: url("/wp-content/uploads/2017/01/background-mobile.jpg") !important;
   }
}

Hello there,

You should use absolute URL, otherwise it won’t be read. The code should look like this:


@media only screen and (max-width:768px) {
   body.custom-background {
     background-image: url("http://www.manoroaksha.info/wp-content/uploads/2017/01/background-mobile.jpg") !important;
   }
}

Regards,
Kharis

doesnt seem to make any difference. only the very top left portion of the image appears, magnified across the whole screen.

Try this code:


@media only screen and (max-width:768px) {
   body.custom-background {
     background-size: 100% !important;
     background-image: url("http://www.manoroaksha.info/wp-content/uploads/2017/01/background-mobile.jpg") !important;
   }
}

Let me know how it goes.

Regards,
Kharis

Anytime i add background-size the whole image disappears.

Please remove this line:


background-size: 100% !important;

so that the image will cover the entire screen. Once you’re done, clear your web browser’s cache to see the change takes affect.

Regards,
Kharis

so that puts us back where we started. cache cleared. looks the same as when we started.

instead of the following image in the background, all i see is the super magnified brick pattern from the top left of the image.

are u seeing something different?

Hello there,

What’s resolution your device? http://www.whatismyscreenresolution.com/

Maybe you need to use larger image and make sure the most important part (Manor Oaks) is visible in the center.

Regards,
Kharis

my device’s resolution is 360x640.

ive now resized the image to match. same issue though.

On chrome’s emulator, it appears like this:

Cloudup

The body calls the correct image, smaller version which is defined by additional custom CSS.

How does it look on your device? Could you please take a screenshot and share its link here? For screenshot image itself, you can upload it to the free image hosting like cloudup.com.

Regards,
Kharis

Hello there,

Please try to update the code becomes like this:


@media only screen and (max-width:768px) {
   body.custom-background {
     background-image: url("http://www.manoroaksha.info/wp-content/uploads/2017/01/background-mobile.jpg") !important;
    background-size: 100% !important;
     background-position: top center !important;
     background-repeat: repeat-y !important;
   }
}

Regards,
Kharis

ah-hah! it was combining background-size with background-position that did the trick. thx much!