Header image doesn't display in static page mode

[Anonymous]

Hi there,

I’ve been working with the Bizplan Pro theme for a couple days, and I’m having trouble getting my header image to display when I switch from blog front-page to static front. I’ve followed the directions in the documentation, but the header image just doesn’t show up.

I also have a couple questions about the header styling itself for when we get it working again. Those are:

1. Is there a way to keep the image from repeating? Basically I want to use a large image and have it rescale so that you never see the edge. I work on a 5k iMac, and the image is much too small even when the window is sized down to a more reasonable size.
2. When the top header option is engaged, that header isn’t large enough to cover the logo. My logo has a transparent background, but reads best on white (although I can make changes if necessary). Is there a way to expand that header to give the proper background behind my logo?

You can find my site at http://curriculum.design.

Thanks!

Kuyler

[keonthemes]

Hello @Kuyman ,

Thank you for using Bizplan Pro. We have checked your website URL and can see the header image on every page. You are using larger image, maybe that’s the case you have seen zoomed banner images. Please add some lines of CSS code, it will cover your requirement. For that, go to Dashboard > Appearance > Customize > Additional CSS and paste below code:

.wrap-inner-banner {
-webkit-box-shadow: cover;
-moz-box-shadow: cover;
-ms-box-shadow: cover;
-o-box-shadow: cover;
box-shadow: cover;
}

Regarding the background color, you can use white background by default behind the logo. So it will fit in default and fixed header.

Hope it will help.

Best Regards!!!

• This reply was modified 6 years, 10 months ago by keonthemes.

[Anonymous]

OK, I think I understand what’s happening.

I tried your CSS and ended up changing it around a little to this:

.wrap-inner-banner {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

That worked some, but I can tell something is going on that makes the image resize to cover an area much larger than the actual header. My guess is this is some kind of CSS hack to get the parallax to work.

Any ideas on how to fix that problem?

I still don’t have a header image on my homepage, but I have used the slider there to serve that purpose.

I have not been able to remove the gray overlay from either the header image or the slider by changing the color in the settings.

Thanks for your help so far. We’re headed the right way.

[Anonymous]

I have solved the overlay problem. I added this to the additional CSS area after going through your original code and seeing what the overlays were called.

.banner-overlay, .post-content-overlay .post-thumb figure a, .block-portfolio .gallery-thumb .hidden-content {
  background-color: rgba(255, 255, 255, 0.1);
  width: 100%;
}
.wrap-inner-banner .page-header {
  background-color: rgba(255, 255, 255, 0.1);
}

[keonthemes]

Hello @kuyman ,

Yes, you can use a single slide as a banner. To get the parallax effect as an inner banner to home slide, please add Additional CSS. For that, go to Dashboard > Appearance > Customize > Additional CSS and paste below code:

.block-slider .slide-item {
-webkit-background-attachment: fixed;
-moz-background-attachment: fixed;
-ms-background-attachment: fixed;
-o-background-attachment: fixed;
}

And regarding the banner overlay color change, you did on the right way. Thanks.

Best Regards.

[Author]

Posts