Twenty Fourteen
[resolved] [closed] Stretch header image to full screen (12 posts)

  1. johnfrancis
    Posted 1 year ago #

    I am trying to get my header image to stretch to the full width of the screen using Twenty Fourteen.

    I have used the followin code with a CSS plugin which has made the space for the header full width.

    .site-header {
     max-width: 100%;

    However, when I upload an image to use as the header it has to be cropped to the original 1240px x 463. This means that although the space for the header image is full screen, only 1240px of it are actually taken up by my image, leaving white space on the side.

    Can you please help me to fix this.

  2. RightSaidJames
    Posted 1 year ago #

    The width and height of the header image is hardcoded into the theme. To change this, you could amend the following lines in the inc/custom-header.php file:

    add_theme_support( 'custom-header', apply_filters( 'twentyfourteen_custom_header_args', array(
    		'default-text-color'     => 'fff',
    		'width'                  => 1260,
    		'height'                 => 240,
    		'flex-height'            => true,
    		'wp-head-callback'       => 'twentyfourteen_header_style',
    		'admin-head-callback'    => 'twentyfourteen_admin_header_style',
    		'admin-preview-callback' => 'twentyfourteen_admin_header_image',
    	) ) );

    The full path to the file is /[WordPress directory]/wp-content/themes/twenty-fourteen/inc/custom-header.php.

    To avoid this modification being overwritten by theme updates you should use a Child Theme, paying special attention to this section to ensure you correctly load in the child theme's version of this file (i.e. not the parent theme's version).

  3. johnfrancis
    Posted 1 year ago #

    Thanks a lot. Sorted out a child theme and this seems to work.

    Much appreciated.

  4. bertvandersaag
    Posted 1 year ago #

    Thanks for these posts.

    My wide screen monitor still leaves a white space to the right of my header image.

    Can anyone tell me how I could fill it up with a background color?
    See my site.

  5. emilyTK
    Posted 1 year ago #

    @bertvandersaag If you have any questions that are not related to a thread's question, please open your own thread, so people can navigate to it more easily.

    Anyways: You can fill your header up with a background colour by adding this to your style sheet:

    #site-header {
    background: red;

    Choose any colour.

  6. bertvandersaag
    Posted 1 year ago #

    Emily, sorry for the inconvenience, but you have saved my day!

  7. emilyTK
    Posted 1 year ago #

    No biggie, happy to help. :)

  8. Jose B
    Posted 1 year ago #

    If all your header images are going to have the same length & width, would it be wise to set L=100% and W=100%?

    I don't want my images to look stupid on a smart phone screen. Any suggestions on how to make sure flip/rotate nicely?

  9. emilyTK
    Posted 1 year ago #

    Jose, if you set 100% width and height on your images, they are going to scale responsively, no matter the size. I won't be able to fully understand the context of your question, though. Now if you have a live website I can take a look at, I'm sure I could be of better use.

    Same goes for flips and rotations. I just couldn't tell where you're going with that, and it all depends on the context. But you could read up on CSS transitions here:

  10. lennyboya
    Posted 1 year ago #

    I want to do the same thing but can't figure out how to get the custom header file loaded from my child theme folder.

    Can someone give me step by step instructions because i'm rather new to webdesign/wordpress!


  11. emilyTK
    Posted 1 year ago #

    Lenny, if you did exactly like WordPress have described it in their step by step guide on how to set up a child theme, your custom file will load automatically. See the guide here:

  12. Andrew
    Forum moderator
    Posted 1 year ago #

    If you need more support than that has already been given in this thread please open a new one: https://wordpress.org/support/theme/twentyfourteen#postform

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic