Support » Theme: Nisarg » Keeping the header image proportional AND 100% width

  • maierpa



    I have struggled with this on my own for awhile, and the answer has alluded me. Perhaps it relates to the theme I have chosen (Nisarg How can I keep my banner image at 100% width the browser window (which it successfully does), while ALSO keeping it at 100% height of the image. In other words, how can I keep the image at full width while retaining the original proportions of the image. Right now, if you change the size of the browser, the header height changes to automatically set heights for different @media settings.

    Among others, I have the following adjustments to the Nisarg theme in a child stylesheet:

    .site-header {
    background-size: 100% 100% !important;
    margin-bottom: 2em;

    If I change this to 100% auto, then the image does scale proportionally, but the bottom is cut off.


    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • When I bring up your site using the link you provided it looks the same in all widths.



    Can you be more specific with your comment? The image height currently does not scale up/down proportionally with the image width (which is 100% of the browser window). Instead, the height is set to discrete values. So between 768px and 979px, the image height is locked at 192px. This seems to be set in the @media parts of the css. I don’t want this. Rather, I would like the image height to be the correct proportion of the image width. There are plenty of examples of websites that do this, for example:


Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Keeping the header image proportional AND 100% width’ is closed to new replies.