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

Question

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

cmsdeployed

2020年9月22日 08:51

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/?

Topic theme-twenty-fourteen headers images Wordpress

Category Web

Beeblbrox · Accepted Answer · 2020年9月22日 08:51

You cannot override the header image width as far as I can tell (I've been working on this myself just now) since it's a hard-wired maximum of 1260 in the image upload/selection for the header - Wordpress will insist that you crop it no matter what you do with the CSS (I couldn't find where to change this in functions.php either, I don't think you can without messing with WP core files).

The best answer I have is to set this:

#site-header {
    position: relative;
    z-index: 3;
    background: url(https://example.com/path/to/img.jpg);
}

in your style.css, where you simply set the url to your desired header image obviously. You will have to also get rid of your existing image somehow, I simply set a transparent image of the same height as the header image.

Unfortunately this image wont resize with the rest of your site but it does mean you get a banner that actually matches for example in my case a 1920 width based site.

Hope that helps. I would have added this as a comment but I don't have the rep yet.

*edit - Actually I just read your OP properly and noticed you ARE messing with WP php, so this post probably not much help sorry :-/ however I am interested in how you reset the max width px since that would suit what I've been trying to do perfectly... I could ditch my current solution.

Pieter Goosen · Accepted Answer · 2014年7月15日 04:36

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

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

About