score:1
Accepted answer
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.
score:0
the first answer works well.
i am just adding another option you would like to use.
you can have the img url as props just to make your code more dynamic and robust.
here is my use case:
function sndheader({ bgimage }) {
return (
<div classname="sndheader" style={{ "--img": `url(${bgimage}),
linear-gradient(#e66465, #9198e5)` }}>
<h1>your title</h1>
</div>
)
}
my css looks very minimal and helps you centre everything within the div
.sndheader {
display: block;
border-radius: 0px 0px 57px 57px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
text-align: center;
background-image: linear-gradient(to bottom, rgba(245, 246, 252,
0.52), rgba(117, 19, 93, 0.73)),
var(--img);
background-size: cover;
}
Source: stackoverflow.com
Related Query
- Background image with gradient overlay React
- Header background image disappear and fade away on scroll with bottom gradient in React app
- How to create an image background fade when mapping an array of images with React
- How to make a gradient background in React with single color?
- React background image overlay opacity
- Background image not showing up with React + TailwindCSS
- Issue with displaying background image in a div with REACT
- Background image with JS React and Semantic-ui
- React - Using Conditional Rendering with window.location.href to change Background image
- React background image style not working with local images
- Setting dynamic background image in React with create react-app
- Changing background image using useState and onClick with React
- How to make an svg image as a background image with react and Tailwind css?
- add background image in react with bootstrap
- How can I overlay a background image in a react component?
- How can I define a background image to fill the screen and remove edges on the left and right in React with Material UI?
- React Add/Remove and Toggle Class of Sidebar with background overlay
- Get dimensions of image with React
- React path to public folder in css background image
- How can I repeat a pattern image to create a background in React Native?
- React Native Image Not Working with specific URL
- Gatsby: Set background image with CSS
- require function not working with image in react
- Can you track background geolocation with React Native?
- React js css class background image not visible
- Change background image with styled-component
- Setting background image as prop in react
- NextJS dynamic routing with modal reload causing overlay background to disappear
- React Native - add a masked circle overlay over image
- React makeStyles doesn't set background image
More Query from same tag
- Keep child element from expanding outside parent div
- React Testing Library (RTL): test a responsive design
- React useState, value of input doesnt update
- How to render a nested array?
- .NET Core + React - src folder visible
- React & Formik : how to send back sucess or failure from sucess handler to the component
- React Typescript: Property 'history' does not exist on type 'PropsInterface'
- Google sheets API JavaScript: Access sheet with auth
- Reducer running twice when using useReducer and React Context API
- How to update each and every keys of redux state by iteration with immutable principle
- Update state with spread operator
- Can I use functional component and class component together?
- Module parse failed: The keyword 'interface' is reserved (5:0) File was processed with these loaders
- ERROR Cannot read property 'matches' of undefined
- Easing out transition in React
- React : How can I append '%' sign after the number is entered?
- How to resolve Can't perform a React state update on an unmounted component. in ReactJS when using a string variable instead of a string literal
- reactjs proper use of functions and hooks - I get errors
- React: Why component's constructor is called only once?
- How to Display API data stored in state
- How to push a specific json object in an array?
- React-table hide various columns from button click
- Subcomponents in stateless components
- Using html entity   in react hyperscript
- React/React Hooks: I am trying to trigger a validation using hooks whenever a user leaves input field
- Syntax error rendering JavaScript as text in React
- Draft.js - Unable to get data from the database. Cross-origin error
- How to use useref() to target dynamic material-ui tabs?
- Refusing to apply styles because MIME type
- When Url Typed I need to fetch the single data in react js while calling api