Background Image Conflict With Slideshow

Hanci2Photo

I have a slide show as my page's background.
The menu's white font is not visible with all the photos.



Now, I would like the font color to stay white, so the theme I am using is to my liking.

I would like to have a shade of darkness behind the header.

The theme has the option to add a color as the header background and modify its opacity. However this adds a definite line, which I don't like.



I would like something closer to this, where the bg color of the header gradually fades out:



I created a bg image that I could apply to the theme's background image, but by default, the background image stays behind the slide-show I set up as background for the page.

Is there a way around this?

Thank you so much!

Hikin' Mike

A link to your site?

Hanci2Photo

Hi,

https://keremhanciphotography.smugmug.com/

Thank you!

Hikin' Mike

My opinion....I like it as it is.

With that said, remove the header background. The add this to your site-wide theme CSS:

/**
* Adds Gradient on the Header Backgound
***************************************************/
.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
	background: -webkit-gradient( left top, left bottom, from( rgba( 0, 0, 0, .5 ) ), to( rgba( 0, 0, 0, .05 ) ) );
	background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .5 ), rgba( 0, 0, 0, .05 ) );
	background:    -moz-linear-gradient( top, rgba( 0, 0, 0, .5 ), rgba( 0, 0, 0, .05 ) );
	background:     -ms-linear-gradient( top, rgba( 0, 0, 0, .5 ), rgba( 0, 0, 0, .05 ) );
	background:      -o-linear-gradient( top, rgba( 0, 0, 0, .5 ), rgba( 0, 0, 0, .05 ) );
	background:         linear-gradient( top, rgba( 0, 0, 0, .5 ), rgba( 0, 0, 0, .05 ) );
	}

What this does is creates a gradient black 'rgba(0,0,0)' and opacity '.5' and '.05', top and bottom. Play around with opacity to suit.

Hanci2Photo

Thank you so much.
I will try this.
I really appreciate your help.
Have a great day!