Support » Theme: PureBlog » Header image lower part hidden

  • Dear,

    As header image i use an 1600×850 jpg, as advised. The inage iss however not shown completely, the lower part is covered by the menu.

    Could you please advise me how to solve this?

    Thanks in advance.

    Kind regards,

    Ton

    p.s. site in development (obviously), password protected with Meli$$a

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thanks for the access (You can probably edit your post to remove the pw, though so others don’t use it.

    The only method to adjust the positioning of your image because of the text is part of the image is to add this code to your Additional CSS tab of the customizer:

    .home.has-header-image .custom-header-media img {
        top: -30px;
    }

    Try that out and adjust the negative px value as you need it.

    Hi,

    Thanks for your quick reply. When i add this css however, the top of the image goes off-screen, anf at the botton a part is gone and now black…

    Please help!

    Kind regards,

    Ton

    You have -75px which is too much. Make it like -30 or -35px. The only other option is to redo your image and move your text at the bottom part up further.

    I know that is too much 😉 On purpose to show the image is cropped despite the advised height is used. The same happens in theme twentyseventeen. When installed the default imnage is shown completely, but when I change that to an image of my own, srcset is added to the img-tag and the image gets cropped vertically ;-(

    So again: HELP!

    This theme is actually built from the Twenty Seventeen theme, so it’s going to be almost exact in how this feature/function works. However, I looked at your photo and my only recommendation is to get a new photo created that is large enough, but also, make sure that any text (superimposed) on the image is made smaller and move further up on the image.

    Sorry about that, but that’s is the only way I can think of. The theme (and the twentyseveteen theme is coded to cover (fill) the browser window at all sizes, so there will be some cropping.

    Yes, i know, same problem there.
    I used 2000 x 1200 px on twentyseventeen and 1600 x 850 px on pureBlog. Why are these sizes advised when they will be cropped, is what i like to know.

    Creating a new image is not the problem, the question is what size. Any idea?

    Yur advice is very much appreciated!

    How this header image works is that when you upload a photo, it’s set to crop 1600×850 to help keep the file size down for load times. The custom header feature is a WordPress function, but it’s used in these themes.

    For PureBlog, and if you decide to make a new image, make it close to or at 1600×850 pixels.

    I’m also thinking perhaps I should do an update to this theme where the size is a bit larger, something like the default TwentySeventeen theme has at 2000×1200 (or 1600×1200). If you think that size might work better for you, let me know and I make the modification and upload the theme as an update.

    I know 😉

    The image i use now is 1600 x 850 px:
    <div class=”custom-header-media”>
    <div id=”wp-custom-header” class=”wp-custom-header”></div>
    </div>

    and the cropped images show this:
    779 X 624 pixels (intrinsic 1600 x 850 pixels)

    Hoovering over the image url here shows the image as is, complete. So where the ‘cut-off’ at the bottom comes from is stil a big mystery tp me…

    I’ll ask the one creating the images to extent it tp a 1600 x 1200 px one, but that doesn’t solve this mystery…

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Header image lower part hidden’ is closed to new replies.