Header image height

I am hoping there is a way to decrease the defualt height of the main header image slider.

I want to decrease the size so that you are able to see a part of the page content, at the moment it resizes itself to fit the whole screen.

Hi,

Please post a link to your website, so I can check.

Best Regards,
Csaba

Hello

I would like to decrease the size of this header slider so that it allows user to see that there is content below it. At the moment I think it automatically resizes itself to 100% of screen. I am happy with the width it is only the height I would like to change, hopefully to be a percentage of the screen.

Hi,

You can reduce the slider height with this Custom CSS:

.slides-container .slide-item {
    height: 500px !important;
}

.header-slider, .owl-wrapper {
    height: 500px !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 add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

hello sir,

i did try this code…but it seems like it cut the bground image of the slider…could u give me background image size for this?

** my current problem is, the slideshow header image became stretching and blurry, how to fix this issues? my resolution is 100 for the image. pls help me thanks.

tq

Ok, I have discovered that following code i used to change the height of the main header slider effects the employees too:

.slides-container .slide-item {
height: 700px !important;
}

.header-slider, .owl-wrapper {
height: 700px !important;
}

I need to change the main header image but not the employee one.

I have added this to the other forum topic too.

Hi,

The background image will be cut to fit the area, that’s normal, the background image won’t be shown fully, that’s not possible as a background image.

Best Regards,
Csaba

hi Csaba,

how to make the slideshow header image not blurry?even tho my image bg is 100 resolution.

tq

Hi,

Please try a larger image like 2560x1400px and let me know if that’s still blurry.

Best Regards,
Csaba