Use CSS Gradient Over Background Image

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 */}

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>

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 a linear gradient in a background image

You can achieve this design using :after & :before in your image tag. Please review my code carefully.

I hope you will help you. :)

Let me know further clarification.

.image {    position: relative;    width: auto;    display: inline-block;}
.image::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; display: block; background-image: linear-gradient(to top , currentColor 5%, transparent 30%);}
.image::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; display: block; background-image: linear-gradient(to right, currentColor 5%, transparent 80%);}
<div class="image">  <img src="https://placekitten.com/800/500"/></div>

How to combine Background Image + Linear Gradient in CSS ? Linear Gradient over the Background Image

Make a div inside the section, it will serve as a mask, and set the gradient of this mask as a background in it.

The css of the mask will look like this:

position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;

So it would be all over the parent element (section)

section {

width: 100vw;
height: 10rem;
background: url(https://www.yannickdixon.com/wp-content/uploads/2016/12/161124-golden-seaside-sunset-photography-print.jpg);
}

.overlay {

position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(1%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)) );
background: -webkit-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
background: -o-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
background: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(1%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)) );
background: -moz-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
background: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
}
<section>
<div class="overlay"></div>
</section>

CSS - gradient over a cover image?

Use rgba with transparency and double background-image.

header {  position: relative;  height: 300px;  background-repeat: no-repeat;  background-position: center bottom;  background-image: linear-gradient(to bottom right, rgba(0, 47, 75, .5), rgba(220, 66, 37, .5)), url('http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.jpg');  background-size: cover;  border-bottom-left-radius: 50%;  border-bottom-right-radius: 50%;}h1 {  margin: 0;  padding: 100px 0;  font: 44px "Arial";  text-align: center;}
header h1 { color: white;}
<header>  <h1>Header Content</h1></header>
<section> <h1>Section Content</h1></section>

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.

How do I set a linear gradient over a background image in React?

From what I can tell the code is mostly correct. The one issue I see is with how you pass/set the style prop. You are passing an object with a style property with the CSS rules nested deeper.

<section
style={{ style }} // <-- style properties nested too deeply!
className={classes.top}
>
...
</section>

This results in a style prop that looks more like this:

{
style: {
backgroundImage: `linear-gradient( rgba(8, 8, 37, 0.85), rgba(0, 15, 80, 0.675)), url("${background}")`,
}
}

when you just want:

{
backgroundImage: `linear-gradient( rgba(8, 8, 37, 0.85), rgba(0, 15, 80, 0.675)), url("${background}")`
}

The solution is to just pass style as the prop value:

style={style}

or spread the style object into the style prop:

style={{ ...style }}

I suggest the former.

Full example:

import NavBar from "./NavBar";
// import SocialMedia from "../socialmedia/SocialMedia";
import classes from './MainView.module.css';
import background from '../../img/pic2.jpg';

function MainView() {
const style = {
backgroundImage: `linear-gradient( rgba(8, 8, 37, 0.85), rgba(0, 15, 80, 0.675)), url("${background}")`
};

return (
<>
<NavBar />
<section
style={style} // <-- pass the style object directly
className={classes.top}
>
<div>
<p>My Name</p>
<p>Full Stack Web Developer</p>
</div>
</section>
{/* <SocialMedia /> */}
</>
)
}

export default MainView;


Related Topics



Leave a reply



Submit