How to set twenty fourteen header image at 100% width?

if

 function wpse_custom_header_setup() {
add_theme_support( 'custom-header', apply_filters( 'wpse_header_args', array(
    'width'                  => 1460,
    'height'                 => 220,
) ) );
}
add_action( 'after_setup_theme', 'wpse_custom_header_setup' );

can help define the width of the header in px, how I can set up a header image at 100% to get something similar like http://braidingfreedom.com/?

2 Answers
2

The header image is already set to 100% width by default. Check lines 571-578 in style.css of the twenty fourteen theme

#site-header img {
    max-width: 100%;
}

If you need a bigger header, you’ll need to set the sizes accordingly in the code in your question, which I suppose you got from one of my previous answers 🙂

Just another note here, you can play around with the max width of site-header found in lines 847 to 853.

.site-header {
    background-color: #000;
    max-width: 1260px;
    position: relative;
    width: 100%;
    z-index: 4;
}

You need to set max-width: 1260px; to your set width in your function

Leave a Comment