Header image scaling

  • Resolved rabrol

    (@rabrol)


    10 years, 1 month ago

    Still loving this theme, but would like to add some more minor customization.

    The header image recommended image size is 1920×1280.
    I would like to work with a smaller header, resized to 1920×600 for example. However when I upload a different size, some weird cropping / scaling takes place.

    I have set custom CSS to the same max height, but the header images still zoom in. Is there a way to overcome this?

    Thanks in advance!

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

  • It’s a background image set to cover so it might not look exactly as your original. You can try using this in a custom CSS plugin:

    .has-banner:after {
      background-size: contain; /*or you can add percentages here 80% etc.*/
}

    Some more options for it will be added in the next version.

    Thread Starter rabrol

    (@rabrol)

    Unfortunately this didn’t make any difference. Tried it with the contain parameter and the percentage ??

    Looking forward to the next version through!

    Sorry, this should work:

    .has-banner:after {
      background-size: contain !important; /*or you can add percentages here 80% etc.*/
}

    Thread Starter rabrol

    (@rabrol)

    Ah, yes. That seems to do it.
    Thank you so much!

    Hi there, I just tried to go exactly what was described and now no photo is displaying, but just a big white space! Please help! I can open a new thread, but this related to why I changed what I did in CSS.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Header image scaling’ is closed to new replies.