Need help with CSS style of the image in the header

I'm attempting to get some CSS help with one of my websites. I need help with the header image CSS - it's currently not showing properly and it's not resizing responsively.

  • Predrag Dubajic

    Hi David,

    I had a look at your site and from what I see the current theme CSS is responsible for the behavior of that image on smaller screens.
    You can try applying this CSS code and that should help:

    @media only screen and (max-width: 685px) {
    	.page-header img {
    		width: inherit;
    	    max-width: none!important;
    	    left: inherit;
    	}
    
    	.page-header {
    		height: auto!important
    	}
    }
    
    @media screen and (max-width: 1155px) {
    	.page-header img {
    		width: inherit;
    	    max-width: none!important;
    	    left: inherit;
    	}
    
    	.page-header {
    		height: auto!important
    	}
    }
    
    @media screen and (max-width: 1295px) {
    	.page-header img {
    	    width: 140%;
    	    max-width: 140% !important;
    	    left: -20%;
    	}
    
    	.page-header {
    		height: auto!important
    	}
    }

    I left each of the breakpoints as they are in the theme so you can adjust each one individually if needed.

    WordPress offers Custom CSS field inside Appearance > Customizer but if your theme disables this and it doesn't have its own CSS field you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Best regards,
    Predrag

  • Adam Czajczyk

    Hi David

    The issue with responsive images in background is, unfortunately, a bit "tricky". The only way that gives you a 100% certainty of showing an entire image is using a "fixed" layout (that might be using media queries of course to set various width/height depending on the device screen) and that has its downsides too that could affect user experience in other ways.

    Other than this, you'll have to use CSS "background-size" set to either "contain" or "stretch" or "cover". Both "contain" and "stretch" will let you show entire image always but "contain" will result in some empty spaces above/below or on sides of the image for some screen resolutions and the "stretch" will distort image in some cases. Only "cover" option will keep aspect ratio and let you do a "full width" image at the same time but there's a good chance that at the same time some parts of the image (usually top/bottom) might get cut off.

    You can try to fix that with additional media queries setting container element's height depending on the screen width like this:

    @media only screen and (max-width: 685px) {
      .page-header {
          max-height:initial!important;
    	    height:290px!important;
    	    overflow:hidden;
      }
    }
    @media only screen and (max-width: 415px) {
      .page-header {
          max-height:initial!important;
    	    height:250px!important;
    	    overflow:hidden;
      }
    }
    @media only screen and (max-width: 375px) {
      .page-header {
          max-height:initial!important;
    	    height:200px!important;
    	    overflow:hidden;
      }
    }

    Please note though:
    - above code is for smaller screens and you might need to actually adjust the height values for each media query to what suits your needs best
    - still, it's not a 100% "elastic/fluid" solution, though you can add many more media queries for "in between" resolutions

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.