Set Background Image without any color shade. I'm getting shades in background image.
Check the attached image.
Hi Prince,
Just add the following CSS in your Theme:
.card-background-color { opacity: 0;}
See the example below:
Hope it helps.
Regards,João
Here is the steps I'm using for Background image.
1. Select (Background image) from widget.
2. Set it into the adaptive container.
Note : It's taking default shade while selecting widget without insert any background image. Find the attached image.
Hi Prince K,
What you are showing is a Developer Environment screenshot.
Have you applied the CSS above, published and tried on the browser / mobile to see if the shade has disappeared?
Thanks for your reply. but if I set opacity:0 to the background It will show nothing to me.
Check the image.
Try with opacity: 1 instead of 0
Just paste following CSS in your screen where you are using this Card Background.
.card-background-color:after { background: none; }
Hope it helps, Thanks :)
I understood your problem, Have you tried putting following CSS inside your Cards_demo webblock stylesheet? This will solve your issue.
Thanks
Here is the image of my UI.
you don't have to create an extra class like card-demo-2, you simply need to paste following exact CSS in your block's stylesheet. Place same CSS as i have provided with no any changes and it will work without adding class name in pattern's extended class property.
See below screen shot and place same css in Block stylesheet
Yes, I have did the same thing. Applied CSS directly into the Style sheet not as a Class
Changes are in the image.
As per the CSS priorities, you need to put this CSS inside screen where you are using Cards_demo web block. Try to put it into the parent screen stylesheet of the block.
Hope this will definitely help you:)
Yes, Thanks a lot. It's working now.
And Can you please tell me How can I set that background image as fit to container.
Please check the attached image.
To fit background image, set MinHeight property to 200 in CardBackground UI pattern and set height of image 100% as shown in screenshots:
Hope this helps :)
Hope you're doing well!
I have an alternative way to solve your issue.
Please check the following link as I had posted the answer for the same:
https://www.outsystems.com/forums/discussion/70990/background-image-set-using-theme-editor/#Post329375
Cheers,
Kunal Dhoble