Image mobile friendly

  • Unknown's avatar
    mhdsoueidan · Member ·

    Dears,

    I have added a background image on my home page, but it’s not showing in full size on mobile. Please assist me to know how to make my background image mobile-friendly.

    Best regards.
    Mohamad

    WP.com: Yes
    Correct account: Yes

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi Mohamad,

    What’s the URL of the site you’re working on?

    I checked the WordPress.com site in your account, http://com79480909.wordpress.com/, but that site only contains the demo content it was created with, and doesn’t have a custom background image set.

  • Unknown's avatar
    radicalnwconstruction · Member ·

    Hi,

    I am not currently working on this site.
    This is the site I’m working on is: https://radicalnwconstruction.com/

    Thanks for getting back soon,
    Mohamad

  • kokkieh · Staff ·

    Thanks for the link. That site’s under a completely different account, which is why I couldn’t see it before :)

    What you’re seeing is an intrinsic limitation of background images – they don’t scale down automatically when viewed on smaller screens if they have height or width dimensions set. If you add one to a Cover Block as you did in that page, a height dimension is automatically set, as the image must cover the full height of the block.

    If the image were to scale down on smaller screens, it won’t fill the entire block top to bottom, or it would need to be repeated/tiled, neither of which would look good.

    I did some searching and it looks like you might be able to force the image to scale down by adding custom CSS code to override the default settings, but then you’ll run into the problem I explained above. Using custom CSS code also requires the Premium Plan.

    Theoretically you could use custom CSS code to replace the image on the fly based on screen size as well, but that’s a bit of a hack and not guaranteed to work.

    Is the main issue here the text that’s not visible any more on smaller screens? If that’s the case, I’d recommend setting an image without any text, and add your text as a paragraph block inside your cover block instead. That way the text will adjust responsively, even if the image doesn’t.

    In the Cover Block settings in the editor you can also set a focal point on the image. That focal point will remain at the center regardless of screen size, so will at least allow you to control which part of the image remains visible on mobile screens.

    https://wordpress.com/support/wordpress-editor/blocks/cover-block/#focal-point-picker

    Let me know if you have any questions about this.

  • Unknown's avatar
    radicalnwconstruction · Member ·

    Dear kokkieh,

    Thank you for your assistance.

    The main problem is that on mobile the cover image gets cut off in my posts (especially for width). I don’t have this problem with laptops/desktops.

    Regards,
    Mohamad

  • staff-sheva · Staff ·

    Hi @radicalnwconstruction,

    What I suggest here is changing the focal point of the image, as well as resetting its minimum height.

    As the cover block is meant to be responsive on smaller screen sizes, including the text “burnt in” to the image will likely make it appear as cut off on smaller screen sizes — consider adding that text as a paragraph block within the cover block, rather than part of the image.

    Hope that helps!

  • The topic ‘Image mobile friendly’ is closed to new replies.