HOMEPAGE – Header Image/Banner

  • Author
    Posts
  • #161123

    Is it possible to set the front homepage header image so that it is uniform with the other pages? Same question for testimonials header.

    I am using this CSS for the other pages:

    /* increase height of the page header section */
    .page-id-41 .page-header {
    padding-top: 10rem;
    padding-bottom: 1.5rem;
    }

    Is it also possible to adjust the position of the image used in the header section so that it displays what I want? For example if I upload a photo of two people training, the way the header appears at the moment, only the bodies will show and not their heads. Anyway to get around this or do I have to manually resize/crop the photo so it shows what I want.

    Best regards,
    Matt

    The blog I need help with is zenith-performance.com.

    #161143

    tarasdashkevych
    Theme Author

    Hello Matt,

    “Is it possible to set the front homepage header image so that it is uniform with the other pages?”
    – Are you using the Front Page template for your homepage?

    “Same question for testimonials header.”
    – Testimonial page differs from regular pages. To make changes to the testimonial archive page, please use this custom CSS:

    
    .post-type-archive-jetpack-testimonial .page-header {
      padding-top: 10rem;
      padding-bottom: 1.5rem;
    }
    

    “…For example if I upload a photo of two people training, the way the header appears at the moment, only the bodies will show and not their heads…”
    – The background image in the header section uses a cover functionality, meaning the browser automatically scales the image as large as possible and maintains image aspect ratio so the image does not get squished.

    The image covers the entire width and height of the container. When the image and container have different dimensions, the image is clipped either at the top and bottom edges, or the left and right edges.

    By default, the browser centers your image in this section. Try this custom CSS to change position of the image in the header section:

    
    .page-id-41 .page-header .th-featured-image {
      object-position: center top;
    }
    

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

The topic ‘HOMEPAGE – Header Image/Banner’ is closed to new replies.