[Support request] Page / Header Appearence

Home Forums Support [Support request] Page / Header Appearence

Home Forums Support Page / Header Appearence

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #2373856

    The first image is in GP Customizer, the next image is in Firefox, the next image is in Chrome. The appearance / image in GP is CORRECT. Latest version of GP and Premium, latest browser versions, Siteground hosting on PHP7.4?, cleared cache. Why the differences? Just want a image for a header on every page, basically a header image as they used to be called back when I did site sin thew 90s or when I started using WP in 2006. Don’t need a hero image or other things flying around.

    Simple site for news.

    GP Cusomizer

    Firefox Browser

    Chrome Browser


    Customer Support

    Hi Mike,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know ๐Ÿ™‚


    Sorry, thought the URL showed in the images. ๐Ÿ™


    Customer Support

    Hi there,

    i checked the site in Firefox ( dev edition ), and this is the result:


    I used the dev tools to inspect the HTML, and as you can see there is only a single HTML <img> being output.
    I do notice that the HTML is missing the width and height attributes. Is the image being converted to webp on the fly ?


    I create my webp images in Photoshop, and have always done so. More control and faster site.

    I deleted the header image from the Site Identity, Logo, and then added the image to the background of the header image in Background Images, Header.

    Obviously not the way it should be done, but it looks OK, however now I get errors (only half of the header shows)and a slower site in pagespeed in the FCP and LCP.

    Check out the site in opera, you can see what I mean by the header image

    Customer Support

    The previous method, ie showing an Image ( not a background ) worked fine for me across all devices / browsers
    Try uploading a regular JPEG image for the site logo. And in Firefox disable any extensions to make sure none of those are conflicting.


    I am wondering if this code in the fucntions.php (child theme) might be causing the webp bug. Added this years ago before native webp was included in the WP allowed files.

    * GeneratePress child theme functions and definitions.
    * Add your custom PHP in this file.
    * Only edit this file if you have direct access to it on your server (to fix errors if they happen).

    function generatepress_child_enqueue_scripts() {
    if ( is_rtl() ) {
    wp_enqueue_style( ‘generatepress-rtl’, trailingslashit( get_template_directory_uri() ) . ‘rtl.css’ );
    add_action( ‘wp_enqueue_scripts’, ‘generatepress_child_enqueue_scripts’, 100 );

    add_action( ‘wp_enqueue_scripts’, function() {
    wp_dequeue_style( ‘generate-fonts’ );
    } );

    add_filter( ‘wp_trim_excerpt’, ‘tu_excerpt_metabox_more’ );
    function tu_excerpt_metabox_more( $excerpt ) {
    $output = $excerpt;

    if ( has_excerpt() ) {
    $output = sprintf( ‘%1$s <p class=”read-more-button-container”>%3$s</p>’,
    __( ‘Read more’, ‘generatepress’ )

    return $output;

    function webp_upload_mimes( $existing_mimes ) {
    // add webp to the list of mime types
    $existing_mimes[‘webp’] = ‘image/webp’;

    // return the array back to the function with our added mime type
    return $existing_mimes;
    add_filter( ‘mime_types’, ‘webp_upload_mimes’ );

    //enable preview / thumbnail for webp image files.
    function webp_is_displayable($result, $path) {
    if ($result === false) {
    $displayable_image_types = array( IMAGETYPE_WEBP );
    $info = @getimagesize( $path );

    if (empty($info)) {
    $result = false;
    } elseif (!in_array($info[2], $displayable_image_types)) {
    $result = false;
    } else {
    $result = true;

    return $result;
    add_filter(‘file_is_displayable_image’, ‘webp_is_displayable’, 10, 2);

    function auto_featured_image() {
    global $post;

    if (!has_post_thumbnail($post->ID)) {
    $attached_image = get_children( “post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1” );

    if ($attached_image) {
    foreach ($attached_image as $attachment_id => $attachment) {
    set_post_thumbnail($post->ID, $attachment_id);
    // Use it temporary to generate all featured images
    add_action(‘the_post’, ‘auto_featured_image’);
    // Used for new posts
    add_action(‘save_post’, ‘auto_featured_image’);
    add_action(‘draft_to_publish’, ‘auto_featured_image’);
    add_action(‘new_to_publish’, ‘auto_featured_image’);
    add_action(‘pending_to_publish’, ‘auto_featured_image’);
    add_action(‘future_to_publish’, ‘auto_featured_image’);

    // Defer Parsing of Javascript – 10-13-2022

    function defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don’t break WP Admin
    if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
    if ( strpos( $url, ‘jquery.js’ ) ) return $url;
    return str_replace( ‘ src’, ‘ defer src’, $url );
    add_filter( ‘script_loader_tag’, ‘defer_parsing_of_js’, 10 );

    Customer Support

    If it was causing an issue, then i would expect to see the problem on my site too.
    As its isolated to a specific browser, then i assume its a conflict, it could be that firefox / opera are not interpretting the webp image correctly. Hence try a JPEG to see if that works.


    The file format makes no difference, but as soon as I remove the image from the background, and add it as a header, I am back to two images in Firefox, latest version with no addons, and in Chrome and Opera I am back to the space all around the image.


    So, if I use the header image in the header options, I get two images in Firefox, spaces in Chrome, and a cutoff image in opera. If I use the background image it works somewhat, but still is not correct.

    Customer Support

    Very weird, i’ll have a nose around the Firefox bug list to see if anyone has experience this.
    If you’re happy using the background image, then add this CSS to keep the image 100% visible and responsive:

    .site-header {
        min-height: 200px;
    @media(max-width: 1400px) {
        .site-header {
            min-height: 14.28vw;

    Note this: min-height: 14.28vw; the odd value is the aspect ratio of your original header image.
    ie. height / width * 100 = image aspect ratio %
    your image was 200px / 1400px * 100 = 14.28%

    By setting the site headers min-height to that % using the vw ( viewport width ) you will have a size responsive site header

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.