Is there a way to add an overlay...

User 2846109 Photo


Ambassador
341 posts

If we have a background photo, is there a way to overlay a solid color on top of that image. For example, put a 50% opacity black on top of a photograph.

I see as a work around we can add a gradient using the same color/opacity as the start and end but wasn't sure if there was a simple way to add a single solid color overlay?
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2681734 Photo


Registered User
8 posts

Maybe a different approach but perhaps this will work:
* Add the color as an "underlay" - so add the full color you want as the background color of the photo's holding div.
* The change the opacity of the photo to suit. (Select photo, then Design tab, then Effects > Opacity )
Attachments:
User 2681734 Photo


Registered User
8 posts

Hmm - might want to try this file instead. :rolleyes:
Attachments:
User 2699991 Photo


Registered User
4,782 posts
Online Now

Jeff G wrote:
If we have a background photo, is there a way to overlay a solid color on top of that image. For example, put a 50% opacity black on top of a photograph.

I see as a work around we can add a gradient using the same color/opacity as the start and end but wasn't sure if there was a simple way to add a single solid color overlay?


set the row as holding the background image
set the column to same height as row, then add background colour, you can adjust the opacity in the colour pallette or under effects in the design panel.

If your row needs to be full width and you dont want the image so big ,do same but use sub-grid row/column set to the width that you require, but then again BadCat's suggestion also works
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 188640 Photo


Registered User
895 posts

Or just do it in Photoshop and have less code in your files. :D
A Rose is Just a Weed in a Corn Patch!
User 2088758 Photo


Senior Advisor
3,086 posts

Ernie Hodge wrote:
Or just do it in Photoshop and have less code in your files. :D


This does work Ernie but you do lose out on SEO when you do this.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2846109 Photo


Ambassador
341 posts

Thanks everyone for the great suggestions!

I didn't even think to do it the way BadCat suggested but in the end I think I prefer to either do it Wayanjaya suggested as I already have those components placed so I don't really need to add any other elements, or by just using the non-gradient gradient method.

I always do keep the option of doing effects like this in Photoshop but I do like having the flexibility of changing the overlays for different page breaks or just updating it as the design changes.

I didn't even think that using overlays are better for SEO, thanks Steve.

Maybe I'll add a suggestion to add a 'new solid' button on the background area as it might be a nice feature to have.

I updated http://exploration.coffeecup.com/ if you want to see the top background overlay change for the different page breaks. This page is just a test site, btw. I used Wayanjaya's method for this one and just put the overlay in the column and the background image inside the row.

Cheers!

http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2699991 Photo


Registered User
4,782 posts
Online Now

Jeff wrote:
Thanks everyone for the great suggestions!

I didn't even think to do it the way BadCat suggested but in the end I think I prefer to either do it Wayanjaya suggested as I already have those components placed so I don't really need to add any other elements, or by just using the non-gradient gradient method.

I always do keep the option of doing effects like this in Photoshop but I do like having the flexibility of changing the overlays for different page breaks or just updating it as the design changes.

I didn't even think that using overlays are better for SEO, thanks Steve.

Maybe I'll add a suggestion to add a 'new solid' button on the background area as it might be a nice feature to have.

I updated http://exploration.coffeecup.com/ if you want to see the top background overlay change for the different page breaks. This page is just a test site, btw. I used Wayanjaya's method for this one and just put the overlay in the column and the background image inside the row.

Cheers!



I am wondering why you want to see a :"New Solid Background" button, when in fact if you open the Background thingy thats already there, there are all the colours of the rainbow and more for you to choose from, all solid, (can adjust transparency from there also if you wish) all you have to do is pick one from the galaxy of colours available and BOOOM there is the new out of this world colour in your background, faster than a speeding rocket taking off for the moon.

Anyway glad that you have figured out your overlay stuff,

Take care wherever in the universe you all are have a great day

Wayan (in his own little universe in Bali)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2846109 Photo


Ambassador
341 posts

I am wondering why you want to see a :"New Solid Background" button, when in fact if you open the Background thingy thats already there, there are all the colours of the rainbow and more for you to choose from, all solid, (can adjust transparency from there also if you wish) all you have to do is pick one from the galaxy of colours available and BOOOM there is the new out of this world colour in your background, faster than a speeding rocket taking off for the moon.


The background color will always be below any images you are using and so you cannot overlay that color ontop of the image. Using color overlays is very common these days.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2699991 Photo


Registered User
4,782 posts
Online Now

Jeff wrote:
I am wondering why you want to see a :"New Solid Background" button, when in fact if you open the Background thingy thats already there, there are all the colours of the rainbow and more for you to choose from, all solid, (can adjust transparency from there also if you wish) all you have to do is pick one from the galaxy of colours available and BOOOM there is the new out of this world colour in your background, faster than a speeding rocket taking off for the moon.


The background color will always be below any images you are using and so you cannot overlay that color ontop of the image. Using color overlays is very common these days.


So whay you are saying is introduce a new "Colour Overlay Button", not a "New Solid Colour" that's where I was confused if that's the jist of your suggestion then that's one i am all for also
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.