Best size for header background image

  • Resolved barbassoc

    (@barbassoc)


    4 years ago

    What is the optimum size of image to upload for use as a header background image? Is there a minimum width for example as there is with things like the logo? I’ve noticed that the images I’ve experimented with can look a bit odd (I only see a tiny portion of them) and I wondered if they were too big/small or if the header background image adjusts automatically according to screen resolution?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Oliver Campion

    (@domainsupport)

    Hi,

    The header background image is set to cover the header area. the positioning is such that the top middle of the image is used.

    We would recommend that you use an image that has enough width to be suitable for the largest of screen sizes (say 2000px) and enough height to be suitable for your header in all screen sizes.

    Without seeing your site, it will be difficult to recommend a height as the content in the header can be very small or very large depending on your choice!

    Hope that helps,

    Oliver

    Thread Starter barbassoc

    (@barbassoc)

    Thanks for such a quick reply. I’d tried a similar size to the one you’ve suggested but it displayed in such a way that it seemed to have zoomed in so far that the details in the image weren’t clear – just a portion of colour within the image. I had chosen a short header size which may have something to do with it.

    This is the link to the site but with a background colour rather than an image at the moment. https://barbicanassociation.co.uk/BA2021site

    Plugin Author Oliver Campion

    (@domainsupport)

    Please can you let me know what the image size was that you used? Also, what browser are you using and what size screen are you viewing the site on?

    Thanks,

    Oliver

    Thread Starter barbassoc

    (@barbassoc)

    I’m using Firefox on a 15 inch laptop (1536 X 864) and the image I used was 2000 px x 110 px

    • This reply was modified 4 years ago by barbassoc.
    Plugin Author Oliver Campion

    (@domainsupport)

    Aha! I see! It’s because the image is fixed (to create a sort of parallax effect). As such it’s not just covering the header but trying to cover the entire screen.

    We need to look into this to see if this should be considered to be a bug or not!

    So the fix will be to either …

    1) Upload an image that is 2000 x 1200px (not ideal)
    2) Add this CSS to “Customizer – Additional CSS” to prevent the image from being “fixed” …

    #masthead-wrapper {
background-attachment: scroll;
}

    Sorry for the confusion! I’ll update when I have looked into this more fully.

    Oliver

    Thread Starter barbassoc

    (@barbassoc)

    OK, great. Thank you so much for your help!

    Plugin Author Oliver Campion

    (@domainsupport)

    Hello,

    Just to update this thread, we have now added an option in the latest update to “fix” the background image in the header to create the parallax effect.

    This can be enabled / disabled by going to “Customizer – Header Options – Fix Background Header Image”.

    Oliver

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Best size for header background image’ is closed to new replies.