Set Background Image without any color shade
Question
Application Type
Reactive

Set Background Image without any color shade. I'm getting shades in background image.

Check the attached image.

img2.png

mvp_badge
MVP

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.

image.PNG

mvp_badge
MVP

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.

image2.PNG

mvp_badge
MVP
Champion

Hi Prince,

Just paste following CSS in your screen where you are using this Card Background.

.card-background-color:after {
    background: none;
}


Hope it helps, Thanks :)

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.

image.PNG

Champion

Hi Prince,

I understood your problem, Have you tried putting following CSS inside your Cards_demo webblock stylesheet? This will solve your issue.

.card-background-color:after {
    background: none;
}

Thanks

image1.PNG

Champion

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.

image4.PNG

Champion

Hi Prince,

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.

.card-background-color:after {
    background: none;
}


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.

image5.PNG

Champion

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 :)

Hi Prince,

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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.