Back to Community
Home / Community / Theme → Twenty fourteen

How to Fix Twenty Fourteen Header Image Not Stretching to Full Width

18 threads Sep 9, 2025 Theme → Twenty fourteen

Content

A common issue reported by users of the Twenty Fourteen theme is that the header image does not stretch to the full width of the screen, leaving unwanted white space on the sides. This problem typically occurs after users modify their site's layout to be full-width but discover the header image remains constrained to its original maximum dimensions.

Why This Happens

The Twenty Fourteen theme is designed with a fixed maximum width for its content and header. The default header image size is 1260 pixels wide. When CSS is used to make the overall site layout full-width (e.g., max-width: 100%;), the container for the header expands, but the image itself is still served at its cropped, predefined size. This creates a discrepancy where the header space is full-screen, but the image within it is not.

Common Solutions

1. Use a High-Resolution Header Image

Before attempting more complex solutions, ensure your source image is large enough to fill modern, wide screens. As seen in Thread 2, a user resolved their issue simply by using an image that met the recommended size. For a full-width design, your image should be significantly wider than 1260px; a width of 1920px or more is a good starting point.

2. Override Image Dimensions with CSS

The most straightforward fix is to use CSS to force the header image to scale to 100% of its container's width. You can add the following code to your theme's "Additional CSS" section or your child theme's style.css file.

#site-header img {
    width: 100% !important;
    height: auto !important;
}

This code tells the browser to make the image fill the entire width of its parent container while maintaining its aspect ratio. The !important rule helps ensure this declaration overrides any other conflicting styles.

3. Modify the Theme's Header Image Size (Advanced)

For users who are comfortable with code and are using a child theme, a more permanent solution is to change the theme's default header image size. This requires adding a function to your child theme's functions.php file. Note: Incorrectly editing this file can cause errors, as shown in Thread 3, so proceed with caution and always have a backup.

function my_custom_header_setup() {
    $args = array(
        'width'         => 1920, // New width in pixels
        'height'        => 400,  // New height in pixels
        'flex-width'    => true, // Allows the width to be flexible
        'flex-height'   => true, // Allows the height to be flexible
    );
    add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'my_custom_header_setup' );

This code redefines the supported header image dimensions, allowing you to upload and use a much larger image. After adding this code, you will need to re-upload your header image.

Important Considerations

  • Child Theme: Always use a child theme when modifying theme files (like functions.php) to prevent your changes from being overwritten during a theme update.
  • Image Quality: Using a very large image can impact page load speed, especially on mobile devices. Consider using responsive image techniques or a plugin to serve optimized images.
  • Mobile View: A full-width desktop header may not look good on mobile. You may need additional CSS media queries to adjust the header's appearance on smaller screens, as mentioned in Thread 17.

By following these steps, you should be able to successfully create a full-width header image for your Twenty Fourteen theme.

Related Support Threads Support