How to get full control over header image display?

  • Hi!

    I would like Sydney to display all parts of the header image I specify. In other words: No auto-cropping, thank you… ??

    If you look at the page I link to, you see a somewhat strange header image which is much wider than high. The image I specified as header image is actually the image you see on the page, below the headline. This image is almost a square. How do I get Sydney to display my header image exactly as it is, and not cropped both at the top and the bottom. If I want a ‘widescreen’ image, I will create such…!

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

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

  • Hi @hero2,

    What you are seeing on header is currently a cover background. The image is filling the entire header area with proportional scaling. That’s why some parts of the image are unseen.

    To change this behavior, you may want to set a contain background by adding this simple CSS code to Appearance > Customize > Additional CSS from dashboard. 

    .header-image {
  background-size: contain;
}
    Thread Starter hero2

    (@hero2)

    Hi!

    Thank you for your reply.
    That CSS changes it, but it’s still not as I imagined. There is still some auto-cropping of the bottom of the image and I would like the image to use full width. (Later I will create another image with another aspect ratio.)
    Thank you.

    Thread Starter hero2

    (@hero2)

    Dear Sidney

    My problem has not been solved:

    I want my whole top-banner image (“hero image”) to be visible, so that I have full control over it through manipulating it BEFORE uploading it to WordPress. Thank you.

    I can add that Sidney shows my image cropped at the bottom, not only on my Pages and Posts but also in the WordPress menu: Appearance -> Customizing ? Hero area -> Header Media

    And I think it is obvious that the image should have same width as the browser window in which it is showed.

    Here are 2 links to my website:

    https://wordpress.transformation.dk/hvordan-man-forudsiger-naeste-maaneds-stoerste-nyheder-html/

    https://wordpress.transformation.dk/

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to get full control over header image display?’ is closed to new replies.