How do I combine a background-image and CSS3 gradient on the same element?
Multiple backgrounds!
body { background: #eb01a5; background-image: url("IMAGE_URL"); /* fallback */ background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */}
How can I add a transparent to black gradient over a div / image?
You can't use the gradient and background image at the same time on the same element, since both are a background-image
. But you can assign the gradient to a pseudo element of .bItem
, so you won't have to include an additional element for it. Also, you can just use transparent
and black
instead of rgba()
.bItem { display: flex; justify-content: flex-end; flex-direction: column; position: absolute; top: 0; right: 9px; bottom: 0; left: 9px; padding: 18px; background-size: cover; background-position: center center; background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);}
.bItem:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 0%, black 100%);}
<div class="box"> <a class="bItem" href="/about/"> <div class="bText white"> <h3>TITLE</h3> Additional text here.</div> </a></div>
Background image with gradient overlay React
You can go the CSS variable way. This codepen demonstrates.
Basically, in the React
file:
<div style={{"--img": "url('https://images.unsplash.com/photo-1610907083431-d36d8947c8e2')"}}>text</div>
And, in CSS:
background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), var(--img);
If the gradient must also be dynamic, a similar approach should work still.
Use css gradient over background image
Ok, I solved it by adding the url for the background image at the end of the line.
Here's my working code:
.css {
background:
linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
height: 200px;
}
<div class="css"></div>
Transparent Background Image with a Gradient
Keep in mind that a CSS gradient is actually an image value, not a color value as some might expect. Therefore, it corresponds to background-image
specifically, and not background-color
, or the entire background
shorthand.
Essentially, what you're really trying to do is layering two background images: a bitmap image over a gradient. To do this, you specify both of them in the same declaration, separating them using a comma. Specify the image first, followed by the gradient. If you specify a background color, that color will always be painted underneath the bottom-most image, which means a gradient will cover it just fine, and it will work even in the case of a fallback.
Because you're including vendor prefixes, you will need to do this once for every prefix, once for prefixless, and once for fallback (without the gradient). To avoid having to repeat the other values, use the longhand properties1 instead of the background
shorthand:
#mydiv .isawesome {
background-color: #B1B8BD;
background-position: 0 0;
background-repeat: no-repeat;
/* Fallback */
background-image: url('../images/sidebar_angle.png');
/* CSS gradients */
background-image: url('../images/sidebar_angle.png'),
-moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
background-image: url('../images/sidebar_angle.png'),
-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ADB2B6), color-stop(100%, #ABAEB3));
background-image: url('../images/sidebar_angle.png'),
linear-gradient(to bottom, #ADB2B6, #ABAEB3);
/* IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ADB2B6', endColorstr='#ABAEB3', GradientType=0);
}
Unfortunately this doesn't work correctly in IE as it uses filter
for the gradient, which it always paints over the background.
To work around IE's issue you can place the filter
and the background image in separate elements. That would obviate the power of CSS3 multiple backgrounds, though, since you can just do layering for all browsers, but that's a trade-off you'll have to make. If you don't need to support versions of IE that don't implement standardized CSS gradients, you have nothing to worry about.
1 Technically, the background-position
and background-repeat
declarations apply to both layers here because the gaps are filled in by repeating the values instead of clamped, but since background-position
is its initial value and background-repeat
doesn't matter for a gradient covering the entire element, it doesn't matter too much. The details of how layered background declarations are handled can be found here.
CSS background gradient with image overlay
You're overriding background by setting background-image
. Instead you need to use multiple backgrounds:
background-image: url('../images/logo.png'), linear-gradient(#3C3E89, #6265E4);
According to documentation backgrounds are drawn from closest to most distant. So in your case image should came first to be drawn over gradient.
Add a transparent gradient over a solid background
In the code you provided, the second background
declaration completely replaces the first one because you used the shorthand background
property rather than just setting the background-image
to a gradient. You can combine the background-color
in the first and the background-image
in the second into a single background
declaration:
.btn {
background: red -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}
JSFiddle
Related Topics
Why Does "Left: 50%, Transform: Translatex(-50%)" Horizontally Center an Element
Css: Display: Grid And/Or -Ms-Grid
Why Is My Bounce Animation So Jumpy Instead of Smooth
How to Use Calc() in Tailwind CSS
Center a Row Using Bootstrap 3
Align Lines of Text to Center in Svg
Difference Between Baseline of Empty and Non-Empty Inline Blocks
Pagespeed Caching CSS, Annoying to Develop
How to Force Flex Children Not to Overflow the Container
D3.Js Map (<Svg>) Auto Fit into Parent Container and Resize with Window
CSS Grid: Content to Use Free Space But Scroll When Bigger
Positioning Svg Elements Using CSS
Flexbox Space-Between and Align Right