Velux header – stretching the image

  • I am back with a question on header image for the Velux theme, a follow-up on the following topic I posted last year: https://www.ads-software.com/support/topic/stretching-the-header-image-in-the-velux-theme/

    I need te header image to stretch and show everything in the image. Is that doable with Velux? Showing more of the image was sufficient for the old photo I had, but when switching image to the new one too much of the image is cropped off. How do I make the image stretch and show the image’s content in full? using padding will “squish” the menu and title together, so that is not an option when using Additional CSS for .site-header.

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

  • Hi @hvitravnurab, I will be happy to assist once again,

    In order to show everything from your background image, you can use the following code:

    
.home .site-header {
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

    However, on hvitravnur.com this will not work well with the current image as the banner has a much different aspect ratio than the background image.

    I’m not sure how your other image would resolve with this code, however, I would suggest adding a bit more padding or content to the banner element so that it could even up with the image dimensions:

    Screenshot: https://i.imgur.com/e5eFE5J.png

    I hope this helps, have a nice day,
    Andrija

    Thread Starter hvitravnurab

    (@hvitravnurab)

    Thank you! Yeah, it does look weird with the code you gave – but thank you, good to know how to do it. I tried padding, but then the menu gets squished as well. Is there a way to go around that?

    EDIT: I need to learn to google better, background-position: center did the trick. Thank you kindly for your help and patience!

    • This reply was modified 3 years, 8 months ago by hvitravnurab.

    It was my pleasure to assist you @hvitravnurab,

    I’m glad to hear you were able to set up the appearance that suits your needs and tweak the provided code for the best results.

    Have a nice day,
    Andrija

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Velux header – stretching the image’ is closed to new replies.