Featured image full size in all screens

  • Author
    Posts
  • #149879

    Hello Tara, i want to know haw can i see the featured images in full size in all screens. For example in the page https://rgbestudio.com.ar/servicios/diseno3d/ i see the top and bottom of the image cut. I want to see it completly in every screen. How can i do that? Before yesterday i saw it like i want. But know i see it cut. Thank you

    The blog I need help with is rgbestudio.com.ar.

    #149895

    tarasdashkevych
    Theme Author

    Hello,

    The background image in the page 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 (header page section). 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.

    You can disable a cover functionality for pages by using this custom CSS:

    
    .page:not(.home) #primary-header {
      background-size: contain;
    }
    

    So, the header section will display an original image size.

    Alternatively, you can increase the height of the page header in single page views and keep the cover functionality:

    
    .page:not(.home) #primary-header {
      height: 100vh;
    }
    

    Note, it will not 100% resolve the problem with image size because each device has its own height and width.

    Please let me know if you have any additional questions.

    Thank you,
    Taras

The topic ‘Featured image full size in all screens’ is closed to new replies.