asked on

CSS: Radial Gradient and bckg img?

CSS issue, might not be possible.

I have a radial gradient and a transparent image. I want to blend them.

.page-title{
	background: radial-gradient(ellipse farthest-corner at 50% 30%, #f39b41 20%, #f26344 90%)!important;
	background-image: url(/wp-content/uploads/2019/01/main-bckg.png);
	background-size: cover;
}

Open in new window

File attached. Its large, the title area is 1300px, went double pixel to get best resolution.

I feel like the image, its transparent, should layer on top of the radial gradient. I just cant get it to work.

Suggestions? MAybe a CSS3 option thats better?

ASKER CERTIFIED SOLUTION

Pieter Marais

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

MacLean Fitzgerald

ASKER

So obviously simple. im an idiot. thank you.

MacLean Fitzgerald

ASKER

followup. What about a straight background color, not gradient?

.page-title{
	background-image: url(/wp-content/uploads/2019/01/main-bckg.png);
	background-color: #ccc;
}

Open in new window

That doesn't seem to cut it.

Pieter Marais

Very odd indeed. It appears to be working for me.

element.style {
    background-image: url(https://cdn3.iconfinder.com/data/icons/seo-marketing-2-1/48/56-512.png);
    background-color: #00ff00;
}

Open in new window

MacLean Fitzgerald

ASKER

I just needed to add !important, that solved it.