Header image size "responsive"

second post into few days… sorry
I read many post but I haven’t found a solution. I’ve 1920x500 image for the header. it is not displayed completly if I reduce the size of the browser window. I tryed many “simple custom CSS” (front page has a slider 100% ok):

.header-image {
max-width: 100% !important; or <value> in px or ‘cover’…and many other
height: auto;
}
I’ve tried different sintax for “.header-image”…no luck!

other “simple custom CSS” work!!(i.e. .header-overlay {
opacity: 0;
background-color: #2e2e2e !important;
})

maybe there is a simple error I cannot see.
I’ve tried also:

  • modify style.css
  • empty cashe with total cash
  • cleared browser history
  • re install WP…

any suggestion?
thank you

Hi,

Background images will be cropped on small screens that’s normal, unfortunately you can’t do nothing about that, only if you contain the images inside the sections, but then you will always have extra white space around the image to fill in the section’s background, the image will be always shown in full, but the section will be filled with the background color of the section instead of the image how it is now, by default.

Best Regards,
Csaba

may I “contain” header image with Simple CSS? I’ve tryed many times with different solutions and also with “contain” option but no luck but probably I’ve done some coding/syntax errors

Hi,

You can contain the image, but as mentioned it will leave white space instead, so I guess you will don’t like that way, but if you want to do that, please post a link to your website, so I can give you a Custom CSS to contain the background image.

Best Regards,
Csaba

I refer to the header of pages different from the home page
thank you

Hi,

Please post a link to a page to what you refer to, so I can check.

Best Regards,
Csaba

or

Hi,

You can “contain” the header background images with this Custom CSS:

.has-banner:after {
    background-size: contain !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

great! it works!!!

thank you!!!

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba