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
Why Is My Grid Element'S Height Not Being Calculated Correctly
How to Update Non-Jsf Components (Plain Html) With Jsf Ajax
Html/Css Hexagon With Image Inside
What Is Initial Scale, User-Scalable, Minimum-Scale, Maximum-Scale Attribute in Meta Tag
Using HTML5, How to Use Contenteditable Fields in a Form Submission
Do You Have to Include <Link Rel="Icon" Href="Favicon.Ico" Type="Image/X-Icon" />
How to Simulate Placeholder Functionality on Input Date Field
Prevent Bootstrap Modal from Disappearing When Clicking Outside or Pressing Escape
Accessing Object in Iframe Using Vba
How to Display Raw HTML Code in Pre or Something Like It But Without Escaping It
How to Disable Google Translate from HTML in Chrome
Html5 New Elements (Header, Nav, Footer, ..) Not Working in Ie
Should Global CSS Styles Be Set on the HTML Element or the Body Element