[Theme: Twenty Fourteen] Header Image Size

  • dejalive

    (@dejalive)


    9 years, 9 months ago

    Hi all,

    Inexperienced programmer attempting to expand the 2014 theme to full page width. I installed the Custom CSS Manager plugin and used the following to expand most of the page:

    .site,
.site-header,
.site-headerimage{
 max-width: 100%;
}
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta, .page-content {
 /* Original max-width: 474px */
 max-width: 80%;
}

    The only thing that didn’t expand was the header image, even though it is designed to naturally cover the width of the full page at 1560 px. I went to header.php and attempted to set the width at 100%, and the header image did expand, but the image quality seemed to distort a bit as if it were being stretched. Again, the image itself should be quite large enough to cover the full page width without stretching, so I’m not sure what’s causing it to stretch when I set it to 100%. I have it set back to the original size that the theme confines it to at the moment. Any ideas?

    Here’s my page – http://bullettheatre.com

    Thanks!

Viewing 1 replies (of 1 total)
  • ddfoston

    (@fostonda)

    9 years, 9 months ago

    Hi dejalive

    I had a quick look at your header and put the width to 100% with this code;

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

    I then put the browser into full-screen mode on a large screen. While there was some graining it didn’t look too bad at all and I wouldn’t think most people would notice it.

    However to make sure the quality is totally what you want why don’t you upload a higher quality example of the image, say, something around 2500px wide and use a image crunching plugin such as smush.it to reduce the actually physical file size?

    Once you have your site set up you could use some form of cacheing system to help client response time – there are a number of plugins that can help here.

    I hope this helps
    All the best
    Dave Foston

Viewing 1 replies (of 1 total)
  • The topic ‘[Theme: Twenty Fourteen] Header Image Size’ is closed to new replies.