Options
Background Image Conflict With Slideshow
Hanci2Photo
Registered Users Posts: 8 Beginner grinner
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!
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!
0
Comments
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
https://keremhanciphotography.smugmug.com/
Thank you!
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.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
I will try this.
I really appreciate your help.
Have a great day!