Header Card Images Displaying Side-by-Side Instead of as Background

Cathy_Sarisky · December 4, 2025, 7:48pm

I think the problem is here:

packages/kg-default-nodes/lib/nodes/header/parsers/header-parser.js

2e516814f


      
          // V2 parser
          if (nodeElem.tagName === 'DIV' && isHeaderCardv2) {
              return {
                  conversion(domNode) {
                      const div = domNode;
                      const headerElement = div.querySelector('.kg-header-card-heading');
                      const subheaderElement = div.querySelector('.kg-header-card-subheading');
                      const buttonElement = div.querySelector('.kg-header-card-button');
                      const alignment = div.classList.contains('kg-align-center') ? 'center' : '';
                      const backgroundImageSrc = div.querySelector('.kg-header-card-image')?.getAttribute('src');
                      const layout = backgroundImageSrc ? 'split' : '';
                      const backgroundColor = div.classList.contains('kg-style-accent') ? 'accent' : div.getAttribute('data-background-color');
                      const buttonColor = buttonElement?.getAttribute('data-button-color') || '';
                      const textColor = headerElement?.getAttribute('data-text-color') || '';
                      const buttonTextColor = buttonElement?.getAttribute('data-button-text-color') || '';
                      const header = headerElement?.textContent || '';
                      const subheader = subheaderElement?.textContent || '';
                      const buttonEnabled = !!buttonElement;
                      const buttonUrl = buttonEnabled ? buttonElement.getAttribute('href') : '';
                      const buttonText = buttonEnabled ? buttonElement.textContent : '';

Topic		Replies	Views
Nest blocks in header card? Using Ghost	5	279	January 26, 2024
Headers failing to look like before Using Ghost	2	36	May 1, 2025
New bug when using HEADER layout with images in mobile Bugs	6	249	April 29, 2024
Headers - left align (too far left!) Developer help	4	123	June 27, 2024
Header card improvements - Ghost Changelog News	19	915	September 24, 2023

Header Card Images Displaying Side-by-Side Instead of as Background

Related topics