Header image size

  • Resolved worcsfedwi

    (@worcsfedwi)


    5 years, 1 month ago

    Please can anyone tell me the size I need to make images in the Primer theme so that they fully display on a PC. I’ve tried making images 2400 x 1300, but the top half of the image and sides disappear. I’ve spent hours, if not days, wrestling with images with very little success. I am a non-technical beginner with WordPress, so maybe I’ve missed something obvious.
    I also need to ask a designer to develop a new logo png/image. What size to ask them to make the design so that it fits in?

    The page I need help with: [log in to see the link]

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

  • @worcsfedwi

    The CSS declared on the page for the header image is set to cover. If you want to display the entire image, and ensure no parts of the image are cut off you need to set the background-size to contain on the .site-header element.

    If you head into the Customizers Additional CSS you should be able to add the following to alter the way the header image is displayed:

    .site-header {
   background-size: contain;
}

    Although beware that altering the background size to contain will alter the way things are displayed on mobile and other devices. Since the header is responsive, the size of the header changes which alters the size of the image required to fill the space.

    Thread Starter worcsfedwi

    (@worcsfedwi)

    Thanks Evan. As you say this code is quite tricky to use in practice. Is the ‘container’ is a set size i.e. does the container change with the size of image uploaded? At least I can get a whole image displayed instead of cut off, which will help when we sort out a new header image/logo. The hero background becomes much more important – colour and tranparency, but I’ve given it a go.
    Thanks
    Claire

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Header image size’ is closed to new replies.