Align header image to top

  • Hello, I really love this template and am working on my portfolio website for my writing and photography. However, I am really struggling to get the header image to align to the top.

    Where this really makes a difference in on the sub pages. The image I am using is a photo of me in the Amazon jungle, and when you visit an interior page it just shows the middle of my body. I would like it to align to the top so that my face is what is showing in the header.

    Is there any way to do that?

    Here is my site for reference: https://www.jswanagon.com/

    Any help would be greatly appreciated. Thank you very much.

Viewing 6 replies - 1 through 6 (of 6 total)

  • try this:

    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
    bottom: 70px;
    height: auto;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    }

    works on large screen, but then your head disappears on a smaller screen, so will need to add a media query for smaller screens

    • This reply was modified 8 years, 1 month ago by peterjb101.
    Thread Starter jswanagon

    (@jswanagon)

    Hello Peter,

    I placed it in the style sheet and it didn’t work, so I took it out of there. Then I placed it in the “Additional CSS” section and it still isn’t working.

    Where should I be placing it?

    Thank you very much for the help.

    Place in the Additional CSS and then change the width of your screen. I made the change in the inspect element on safari. It looked ok on a large screen. make sure you copy all the code including the dot at the start.

    I have removed position, try this as looks ok on small screen:

    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
    height: auto;
    left: 0;
    right: 0;
    top: 0;
    }

    See how that works on smaller screen, then look to change/tweak fir larger screens

    Sorry, thought it was working but just checked in developer mode and your head is still missing.

    • This reply was modified 8 years, 1 month ago by peterjb101.

    I have gone down the route of using a plugin Unique Headers, then cropped my main image so that it’s main focal point stays in the centre.

    Thread Starter jswanagon

    (@jswanagon)

    Hello Peter,

    Thank you very much for the help. It is working on smaller screens, so that is something and I do appreciate that.

    I will keep working this angle, it looks like it is on the right track.

    Thank you again for your help Peter. I’m glad to be half way there.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Align header image to top’ is closed to new replies.