Background image not responsive on mobile devices.

  • Resolved zombiedad

    (@zombiedad)


    8 years, 8 months ago

    I am trying to make my background image responsive on mobile devices.
    When the website is viewed on a mobile device, the background image is chopped off at the edges.
    I would like for the image to resize so that all of it is still seen onscreen when on a mobile device.

    I am using a child theme and have already customised some css with a plugin. I just cannot figure this part out.

    Any advice?

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hey there,

    Are you using the latest theme version? Also, try adding below CSS to Zerif using Advanced CSS Editor and let me know how it goes ??

    body.custom-background {
    background-size: cover !important;
}

    Hope it helps.

    Thread Starter zombiedad

    (@zombiedad)

    Ok, I just saw this but have already achieved what I wanted with this css …

    @media (max-width: 702px){
    body.custom-background {
    background-size: 100%;
    }

    But I will bookmark this response for future reference.

    Thank you. ??

    Hey there,

    Glad you figured it out! If you’re happy with our products and support, please leave us a kind review here! Thanks ??

    Please help me. My image will not rescale to mobile whether .jpg or .png. I have tried the code herein and can’t seem to make to work.

    Mike – zero-point.us

    I also have problems with the background image. The background image doesn’t appear on a mobile device. Despite all the codes that I have tried. Maybe there is a bug just like the titel section part. I would like to know if there is a way to make this work.

    Hi,
    I also have problems with the background image on the home page.(using Shop Isle theme child)
    I can see the image properly and fully on desktop but it is cropped at the edges on the mobile version.
    I don’t kow how to fix it even after using Advanced CSS Editor.
    Could somebody please help me with this issue ?

    @remiblaza – Please provide me specific page url with issue to check and resolve.

    Hi,
    You can see on the demo theme page for instance https://themeisle.com/demo/?theme=ShopIsle
    If you take the picture with the women sit on the wood for example, on mobile phone you don’t see the forest in background anymore, only the women is visble.

    It was the same on my website homepage : https://remiblaza.com
    but I changed the backround image to be more mobile friendly but the problem still there even if it’s better.(Previsously, on mobile visitors were able to see only the laptop in the picture and not the entire desktop image)

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Background image not responsive on mobile devices.’ is closed to new replies.