[catwingz]

Hi. If you look at  https://aligningwithsoul.com

you will see that instead of a photo or video, the background of the header has been replaced by solid color. This is currently in the form of an image because I have been unable to find the CSS to just change the background color.

1. How can I change the background color of just the area of the header banner?
2. Is it possible for me to have more control over the height? I have noticed that cropping an image so it is shorter doesn’t appear to make any difference.

Thank you

[minal]

Hello @catwingz:

Unfortunately, the theme does not provide built-in options to change the background color or header height directly. However, you can achieve this by adding custom CSS.

Below is a CSS snippet you can use to change the background color of the header banner:

.custom-header:after {
     background: rgba(0, 0, 0, 0.1);
}

To add CSS , Go to Dashboard > Appearance > Customizer > Additional CSS.

You can modify the rgba value to your preferred color. The last value (0.1) controls the transparency  increasing it will make the background darker, while decreasing it will make it more transparent.

Regarding the header height, it is dynamically generated to ensure that the header image fits the window height. As a result, parts of the image may appear cropped.

Sincerely,
Minal

[catwingz]

@minal Changing the CSS was what I had in mind, and have done so. Thank you. The image has now been replaced by the altered background color. However, the header height remains a problem. Since there is no image to base the dynamic generation on, how can I override the existing height so the area is shorter?

[minal]

Hello @catwingz:

Since there is no option to alter the height but you can adjust the height via CSS.

@media screen and (min-width: 1024px) {
  .custom-header .fp-tableCell,
  .custom-header {
    height: 1000px !important;
  }
  .custom-header .fp-scroller {
    display: flex;
    height: 100vh;
    align-items: center;
  }
  .custom-header .fp-scrollable {
    height: 100% !important;
  }
}

You can adjust the height value to your desired one to “1000px”.

Note: This code only works on desktop.

Sincerely,

Minal

[catwingz]

@minal

Thank you, that helped.

[Author]

Posts