Header image on front page cut off

  • Author
    Posts
  • #3308076

    Hi, using pique theme and the header image seems to be cut off on the bottom. It previously displayed properly but I don’t know what happened. I want the header on the homepage to look like the header on all of the other pages (just click any of the menu options to see).

    Any advice is appreciated.

    website is: https://brownrunningclub.com/

    The blog I need help with is brownrunningclub.com.

    #3308184

    musicdoc1
    Member

    Hi,

    On the Pique theme, a static front page with panels will not display the site header image. Instead, the background of the header area displays either a default gray background color, or a featured image if one is set. You’ve obviously set a featured image on the static front page. It doesn’t matter if you began with the same image displayed as the site header image, because the theme automatically crops featured images.

    I’m not sure if there’s any way to display the site header on the static front page on the Pique them, but I will call for staff attention. Staff will respond here.

    #3308185

    vinnykaur
    Staff

    Hey there,

    I tried to replicate your theme into mine and was testing it with the same header image.
    What I analyzed is when you add panels into the front page, the home page adjusts itself according to the content present in it.

    Since you don’t have any content in your homepage, the featured image is stripped off to adjust the spacing in the front page for all the panels.

    Try adding some content to your homepage to retain the featured image fully.

    I recommend you to read the overview section in the pique theme:
    https://wordpress.com/theme/pique/

    Let us know how that goes!

    Thanks!

    #3308191

    musicdoc1
    Member

    @vinnykaur,

    Hi. It’s true that by adding content to the static front page more of the featured image will display, but it will not appear like the header image on the other pages by adding content alone. The difference in appearance is due to the fact that the other pages are displaying the site header image, while the static front page is displaying a featured image.

    #3308195

    vinnykaur
    Staff

    @musicdoc1,

    That indeed is true.
    Unless if the front page is set to display the latest posts, it will not show the header image as expected, like in the other pages.
    Thank you for sharing that piece of information. :)

    #3308431

    @musicdoc1 @vinnykaur

    Thanks for your suggestions. I went and added spacer blocks in the content of the static front page, which effectively solves my issue.

    #3308589

    musicdoc1
    Member

    @brownrunningclub,

    You’re welcome. Spacer blocks is a good idea : -)

    #3308595

    musicdoc1
    Member

    I’ve just noticed that the featured image on your static front page also has a darkened overlay. That’s why it appears more hazy than the site header image.

    On Pique, for some inexplicable reason, the theme designers have included an option to change the opacity of the default overlay on a featured image set on each of the panels, at Customize > Theme Options > Featured Image Opacity, but no corresponding option for a featured image set on the static front page. This may be intentional, or an oversight. I’ve called for staff attention to the topic regarding this issue.

    It is possible to change the opacity of that overlay with CSS customization, as described by @siobhyb in the topic Panel Opacity in “Pique” Theme, though that would require and upgrade to the WordPress.com Premium or Business plan.

    #3308596

    musicdoc1
    Member

    To make my meaning more clear I should have said,

    On Pique the theme designers have included an option to change the opacity of the default overlay on a featured image set on each of the panels, at Customize > Theme Options > Featured Image Opacity, but (for some inexplicable reason) no corresponding option for a featured image set on the static front page. This may be intentional, or an oversight.

    #3308867

    supernovia
    Staff

    Hi folks, I’ll file a request to have that first panel overlay as customizable as the others. In the meantime, here’s some CSS that you can use to adjust it on your own:

    .pique-panel-background:before {
        background: rgba(0, 0, 0, 0);
    }

    This hides the overlay completely, but you could also change the color or opacity if you’d like, by adjusting those numbers. The first three determine the color (representing RGB, 0 to 255), and the last is opacity. You might try it at .2 instead of 0.

    The background image will indeed be cut off if there’s not enough content to display the full thing. As a fix, though, try positioning it so the road is featured. You can do that with this CSS:

    .pique-panel-background {
        background-position: bottom;
    }

    @brownrunningclub since your site has a Business plan, you’re able to add that CSS as you’d like. Noting too, you can contact support directly at https://en.support.wordpress.com/contact/ for faster support. Cheers!

The topic ‘Header image on front page cut off’ is closed to new replies.