Support » Theme: Baskerville » Header image bigger but entire

  • Hello !
    I usually use 1440 x 221 pixels images for the header, but I have a problem.
    When the screen is larger than 1440, the image is bigger but not entire.
    I want that the image grows with the size of the screen but I do not want that a piece of it misses.

    Could you help please ?

    An example here : https://machine-a-lire.blog.ac-lyon.fr
    The top and bottom of the image is cropped.

    Thanks in advance.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @vfavrat,

    Baskerville automatically resizes the image to cover the entire header area. Since the height of the header is fixed and the width extends the entire width of the screen, the aspect ratio of the header changes, which results in the image being cropped.

    Since your background image has the same background color as the rest of the site, you could add the following CSS to Appearance → Customize → Additional CSS:

    .header.section { background-size: contain; }

    That should retain the aspect ratio of the background image when the screen size changes.

    — Anders

    Edit : Sorry I was trying when you were answering. Thank you very much.

    I am trying that and it seems to work :

    .bg-image {
      background-size: contain ;
    }

    But when the screen is smaller the 70 px padding is not very useful.
    If I put a smaller padding the image reduces.

    How could we change this enormous padding and have an entire image ?

    Thanks !

    Theme Author Anders Norén

    (@anlino)

    Hi @vfavrat,

    For that, you should probably copy the entire header.php file to a child theme and output the header image is a regular image element, rather than a background image.

    — Anders

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.