Support » Theme: Twenty Seventeen » Header Image alignment

  • Resolved astraeus

    (@astraeus)



    Hey folks, so I’m choosing to use just an image for my header rather than a video, and for whatever reason I can’t make it align to the top of the screen. I’ve uploaded multiple versions of the image and cropped it in various ways. Each time I think it’s gonna work, I hit publish, then reload the page and my illustration is at the bottom of the header space rather than the top. Whyyyyy??? I feel like there must be a simple CSS fix but I’m just a copy&paster, I need help!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What ratio image are you using for the header? It might be too short.

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This is the header image the demo uses for reference: http://wp-themes.com/wp-content/themes/twentyseventeen/assets/images/header.jpg

    I’m using a 2000 x 1300. I created a version with a lot of white canvas underneath the illustration to make it tall enough and have the site title lay in the empty part of the image. Still, for whatever reason, it’s defaulting to completely lose that blank space and have the illustration sit even with the text. When I first choose the image and hit publish it looks how I want it, but when I load the page it has always shifted.

    Also, even when you use an image that IS too short in twentyseventeen, it zooms in and crops the sides so that it still fills the banner area. That’s not what’s happening here. It’s actually shifting my image down and adding white space above. Makes no sense to me!

    OK, I’m really unsure as to what I did, but it appears to be fixed. I feel like I basically just button-mashed my way to victory, but I guess a win is a win. Thanks for trying!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Header Image alignment’ is closed to new replies.