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

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