Support » Theme: Sela » Resizing header background image for mobile devices

  • Resolved cyberium

    (@cyberium)


    Hi there. How can I get the header background image to resize so the width fits the screen of mobile devices? Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi there,

    Since Sela is designed for a large custom header, which is used as a background image, edges of the image may indeed get cropped on smaller screen sizes. Custom headers that work best in this type of theme are more flexible, decorative or abstract, so they can handle this sort of cropping.

    With the above in mind, I recommend against using any image containing text as your header image. Instead, I recommend installing/activating the Jetpack plugin (if you haven’t already) and then uploading your image as a logo via Appearance > Customize > Site Title, Tagline, and Logo.

    Sela will resize any image that’s been uploaded as a logo for each device, without cropping. If you dislike anything about the way your image looks when uploaded as a logo then let me know and I can take a look into whether there’s a CSS fix.

    Thanks!

    Hi Siobhan. Thanks for the advice. I’d already done this, but the text is a crucial part of our logo, as you’ll see if you check out the site http://www.cyberium.co.uk. But if you look at it on a mobile device you’ll see it is not resized as it is a background image. David.

    Hi David,

    From the theme’s code, I can see that the image has been uploaded via Appearance > Customize > Header Image.

    Instead, try removing it as a header and re-uploading the image via Appearance > Customize > Site Title, Tagline, and Logo.

    Sela resizes images that have been uploaded as a logo in a different way to how it resizes images that have been uploaded as a header image.

    Let me know how you get on with that.

    Thanks, that works!

    Perfect! If any extra questions come up, please feel free to start a new thread.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Resizing header background image for mobile devices’ is closed to new replies.