Twenty Seventeen Header not showing full image

  • 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: (visible only to logged in users)

  • tarunvijwani · Staff ·

    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!

  • 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!

  • pavanraheja · Member ·

    @tarunvijwani: Sorry missed out on refreshing!

  • tarunvijwani · Staff ·

    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

  • 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;
	}
}
  • 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.

  • 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 :)

  • thesacredpath · Member ·

    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.

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

  • thesacredpath · Member ·

    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
}
  • tecscampdev · Member ·

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

  • thesacredpath · Member ·

    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?

  • tecscampdev · Member ·

    Yes, here it is: https://tecsemploymentdotcom.files.wordpress.com/2017/11/grey-square.png

  • thesacredpath · Member ·

    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;
}
  • 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)

  • thesacredpath · Member ·

    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;
}
  • 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.

  • thesacredpath · Member ·

    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.

  • thesacredpath · Member ·

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

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