How do I make header image scaled rather than fixed?

  • Unknown's avatar
    barrygcooper · Member ·

    Hi all,

    I’m trying to reduce the height of the header on my page. This bit of code…

    .site-header {
    height: 400 px;
    width: 1280 px;
    }

    …does the trick EXCEPT the image is fixed and doesn’t scale according to how large the browser window is.

    Can anyone help me?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    vinoddalvi · Member ·

    Hi @barrygcooper,

    I hope you are well today.

    Try using the following CSS code.

    .site-header {
      max-height: 400px;
      max-width: 1280px;
      width: 100%;
      height: 100%;
      margin: 0 auto;
}
div.site-header-image {
      background-size: 100%;
}

    Best Regards,
    Vinod Dalvi

  • Unknown's avatar
    barrygcooper · Member ·

    Vinod, you’re on fire this morning :) Thank you.

    My bad – I should have been clearer. At present, the header occupies about half the screen when you first load barrycooper.com.

    1. I’d like to shave off 40-50 pixels if I can, so that the header image occupies slightly less of the top half of the screen.

    2. Once that’s achieved, I’d need to make sure the black box that says “Future Perfect, Present Tense” is still in the center of the image.

    Any idea how I’d do those two things? Thanks for your patience and help Vinod – it is much appreciated.

  • Unknown's avatar
    designsimply · Member ·

    Here’s a thread where someone was trying to do the same thing: https://en.forums.wordpress.com/topic/hemingway-rewritten-reducing-header-height?replies=6

    Try starting with the example in the last reply there.

  • Unknown's avatar
    barrygcooper · Member ·

    Excellent, designsimply – thank you! I’ll have a play around…

  • Unknown's avatar
    barrygcooper · Member ·

    Something I’ve noticed is that the black title square at the top of the screen doesn’t stay centered. It moves higher or lower in the header image depending on how wide the browser window is.

    Do you know if there’s a way to keep it centered under all circumstances? Thanks again for your help with this.

  • Unknown's avatar
    designsimply · Member ·

    How interesting :) that’s part of a parallax effect that’s a specialized feature of the theme. I’m surprised you want to remove it!

    It’s actually created with JavaScript. Here’s the script if you’re curious:
    https://wpcom-themes.svn.automattic.com/hemingway-rewritten/js/hemingway-rewritten.js

    What you can try doing is force blocking the change to the “site-header-image” class from that script with an !important like this:

    .site-header-image {
	bottom: 0 !important;
}

    Personally :) I like the effect though.

  • Unknown's avatar
    barrygcooper · Member ·

    Ah, no, I *love* the parallax effect! The translucency change/movement as you scroll down is beautiful.

    What I’m referring to is the way the block moves up or down if you resize (horizontally) the browser window.

  • Unknown's avatar
    designsimply · Member ·

    I see, but now I’m not sure if I’m clear on exactly what you’re trying to change!

    I don’t really see the box move up and down, but rather the size of it changes depending on how the text falls inside it. Let me describe what I’m seeing and maybe that will help: the black box in the header with the site title inside that says,”Future Perfect, Present Tense” gets taller when the browser width is smaller because there is more text than will fit onto one line and so the text is falling to two or three lines and therefore making the box taller. To be clear, are you trying to make that black box stay exactly the same size (relatively) no matter what size screen is used to view the site?

    I tested with Chrome and Safari on a Mac, are those the browsers you’ve tested with as well?

  • Unknown's avatar
    barrygcooper · Member ·

    Hey designsimply – yes, I’m using Safari on a Mac.

    It’s the position of the black box I’m looking at. So as you narrow your browser window, watch the space between the black box and the bottom edge of the vertical coloured lines. On my Mac, I see the black box getting higher/lower depending on how large the browser window is.

  • Unknown's avatar
    designsimply · Member ·

    It’s the position of the black box I’m looking at. So as you narrow your browser window, watch the space between the black box and the bottom edge of the vertical coloured lines.

    I kind of see what you mean. :) But I just want to point out that in the scenario you described before where you wanted to make sure the black box is always centered, there could be a different amount of space between the black box and the bottom of the header area depending on the height—and you set a max-height of 430px on the header area in your custom CSS, so that means the height will be variable.

    It almost sounds like you want to hard code the height of both the header area (colored lines background) and the site title container (black box). If that sounds like it matches your end goal, try adding this to the bottom of your Appearance > Customize > CSS editor:

    .site-branding {
	width: 86%;
	height: 176px;
	margin: 0 auto;
}
.site-title {
	font-size: 24px !important;
}
.site-header-image {
	height: 300px;
	min-height: 300px;
	max-height: 300px;
	padding-top: 70px;
}

    And test it out at various browser widths to see what you think.

  • Unknown's avatar
    barrygcooper · Member ·

    That’s exactly it! Thank you very much designsimply.

  • Unknown's avatar
    designsimply · Member ·

    Yay! :)

  • The topic ‘How do I make header image scaled rather than fixed?’ is closed to new replies.