Twenty Seventeen Header not showing full image

  • Author
    Posts
  • #3042339

    tecscampdev
    Member

    On my homepage I’ve uploaded an image that is 2000 x 1200px as is recommended by the theme. However, what happens is that it doesn’t actually show the entire image.

    Is there any css that I can do to make it show the full image? Also on mobiles, tablets, etc. it doesn’t show the image properly at all.

    The blog I need help with is tecsemployment.com.

    #3042534

    Hi there,
    Please try the below code under custom CSS & let us know if it works:

    .custom-header-media {
        height: 1200px !important;
    }

    Please check all the pages & blog post on every device to confirm it is not impacting anything else.

    Please refer this support article for more details for Custom CSS: https://en.support.wordpress.com/custom-css/

    Please note CSS Customizer is only available in Premium or Business upgrade plan.

    Please refer the below articles to know more about business plans:
    http://wordpress.com/pricing
    https://en.support.wordpress.com/business-plan/
    https://en.support.wordpress.com/seo-tools/

    Hope this helps!

    #3042536

    pavanraheja
    Member

    Hi @tecscampdev,

    I notice that your logo(tecs) and tagline below(get ready for sun fun) is getting cropped in the image. It’s actually a theme feature, that the image gets cropped to look good across all devices. It’s best you try to incorporate your logo and your tagline separately so the cropping of the image does not affect it. You could incorporate this vital information in your site identity information. Or the other option would be to switch the theme. Here is some information from staff @siobhyb which could be useful:

    https://en.forums.wordpress.com/topic/twenty-seventeen-header-image?replies=6#post-3041045

    Hope this helps, let me know for any further information.

    Thanks!

    #3042537

    pavanraheja
    Member

    @tarunvijwani: Sorry missed out on refreshing!

    #3042577

    Hi there,

    I have recently learned by the staff that we should avoid using !important whenever possible as it can make more difficult to troubleshoot custom CSS further.

    Request you to please use below code instead of above if you’re going for custom css:

    .custom-header-media {
        height: 1200px ;
    }

    Link to thread: https://en.forums.wordpress.com/topic/color-change-to-blog-headings?replies=3#post-3041734

    #3042592

    tecscampdev
    Member

    So I ended up getting more or less what I wanted by doing the following. However, the issue is that on pages, other than my first page, it has a weird grey area underneath the header. Can anyone help me get rid of it?

    .has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    	object-fit: initial;
    	width: 100%;
    	height: auto;
    	display: block;
    	min-width: initial;
    	min-height: initial;
    }
    
    .custom-header-media {
    	height: 65vw !important;
    }
    
    @media screen and (max-width: 767px) {
    	.custom-header-media {
    		height: 50vw !important;
    	}
    
    	.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
    		height: 50vw;
    	}
    
    	.logged-in .wp-custom-header img {
    		margin-top: 32px;
    	}
    }
    #3042604

    supernovia
    Staff

    Hi @tecscampdev, actually you shouldn’t need a bunch of CSS to make the theme work like it does in the demo.

    I recommend commenting the CSS out, then heading to My Site > Customize > Header Media and adding your image there.

    #3042606

    supernovia
    Staff

    I just re-read your question and realized you are talking about the text getting cut off. I’d add it also gets stretched out.

    I’ll go ahead and move this to the CSS forums, but if you want to display content over a background image, you might consider other ways to position it. Good luck :)

    #3042609

    Hi @tecscampdev, I’m currently seeing your entire image on my system when I view your site and it is adjusting so that everything is visible at all screen sizes. I also checked on my iPhone and see it all there also.

    Did you get this resolved? I see some custom CSS for the header area overriding some of the original CSS.

    #3042625

    tecscampdev
    Member

    Yes I fixed it with the code I put in my last comment. However, I’ve now got a weird grey area underneath the header. Can anyone help me get rid of it?

    #3042628

    Change your 65vw in this rule to 62vw. It cuts off a tiny bit of the bottom of the image at some screen sizes, but nothing significant.

    .custom-header-media {
     height:62vw !important
    }

    #3042638

    tecscampdev
    Member

    It hasn’t gotten rid of the stange grey opaque area below the menu though?

    #3042640

    Hmmm, I’m not seeing any grey opaque area below the menu on your site. I checked in Firefox, Chrome and Safari on my Mac. Can you take a screenshot and upload it to a file sharing service, or to your Media Library and post a link to it?

    #3042646

    tecscampdev
    Member
    #3042648

    Ah, many thanks for the screenshot. That is a gradient that goes over the header images on Twenty Seventeen. The reason it shows on that page is because the header image has white areas on the left and right. I checked several of your other pages and do not see any with narrower header images like on that page, so I’ve limited this change to only that specific page by using its unique page id CSS class from the opening body html tag.

    .page-id-6064 .custom-header-media::before {
      background: none;
    }

    #3042649

    tecscampdev
    Member

    Unfortunately, it does seem to be on every page and more annoyingly it seems to be over anything else underneath. So if there is a button or something on that page “under the grey area” then you can press it.

    What you’ve put above there has removed the grey on that page, but none of the others, and has just made it transparent colour but still not able to click on anything under that area (but yes further down the page which isnt under that area)

    #3042650

    If you wish to remove it on all pages, we can remove the unique page id CSS class from the beginning like this.

    .custom-header-media::before {
      background: none;
    }

    #3042651

    tecscampdev
    Member

    I’ve done that now and the grey box is gone but I still can’t click on any link in that top area. It’s as if the photo behind is blocking off the links.

    #3042652

    Which links are you talking about? I’m not seeing any text links in the header area with the exception of the menu below the header image.

    #3042653

    I temporarily hid the header image and there is nothing behind the image.

The topic ‘Twenty Seventeen Header not showing full image’ is closed to new replies.