Twenty Fourteen
Featured Image Post Background (5 posts)

  1. rsaeks82
    Posted 1 year ago #

    Hi there,

    I am using the twentyfourteen theme and wondering if there is a way to customize / remove the background of a featured image appearing as the dev.post-thumbnail. If I have an image that is not the full size of the box I get a grey lined background behind the image as shown below:


    I do have a child theme setup with the style.css working as expected with a few other small adjustments but this one has me puzzled. Thanks!

  2. Hannes Salen
    Posted 1 year ago #

    The easiest way to do that is to change the size of your image to 1038*576px, that way it fils the complete space for the featured image.

  3. helpfulsubjects
    Posted 1 year ago #

    I had the same issue. So I installed the free plugin: http://wordpress.org/plugins/fourteen-extended/

    It takes care of that, plus other issues with Twenty Fourteen theme.

    Once you install it and enable it and so on...

    Go to your admin panel (left panel):
    1) Appearances
    2) Customize
    3) TwentyFourteen Content Options "tab"
    4) Check to remove whitespace... or remove background color...
    5) Repeat step 4 under the "General Options "tab"
    And that should fix that.

    I also opted this setting, perhaps you may like it:
    Check to show full width in single post (I kind of like that feature enabled for just the posts, but not the home page.)

  4. rsaeks82
    Posted 1 year ago #

    Hannes - We are going to be having a variety of individuals adding content of various skill levels and having them find the right size image is not going to be something they will want to do.

    helpful - Thanks for the tip. I tried those settings and was unable to get it to work. Using that plugin once I made any change my 'max_posts' => 3, variable is no longer honored and I'm back to displaying up to 6 featured items.

    Thinking it may be easier to find a different theme that will work as I would like it.

  5. Elvis1973
    Posted 1 year ago #

    I had the same problem but after some help in the forums, the code below took care of the issue (just make sure to empty your browser cache)

    .post-thumbnail {
    background: transparent !important;
    a.post-thumbnail:hover {
    background-color: transparent !important;

    .featured-content {
    background-image: none !important;

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic