The React style background property for CSS styling

Is there a way to apply the css property background inline in react?

I attempted to pass the following object without success: 

let style = {
    background:
        `linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)
          ), url("${ place.imgUri }") no-repeat center center cover`
};

Note: It works when only including the url property.

The reason for this is because I need both a linear-gradient and a dynamic background-url.
When defining it through a css class rule, the inline-style overwrites it.

Edit: I am confused about why this question was marked as off-topic. If a css label solution is needed, please advise in the comments (?).

cssreactjs

Answer №1

In the world of CSS, a comma in the background shorthand rule doesn't just separate two background images but actually separates 2 entire backgrounds.

Therefore, if you require one shorthand rule that can override all of the properties at once:

background:
  `linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) no-repeat center center / cover,
   url("${ place.imgUri }") no-repeat center center / cover`

Answer №2

Thanks to the guidance of Gabriele Petrioli, I was able to achieve success.
I simply integrated the following code: 

let style = {
    backgroundImage:
        `linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)
          ), url("${ place.imgUri }")`
};

After that, I included additional CSS class properties: 

background-size: cover;
background-position: center;
background-repeat: no-repeat;

Answer №3

There are a few issues that need to be addressed in the original code.

Firstly, it is important to note that linear-gradient refers to the background-image property which means you actually require two backgrounds. To separate them, you must use a comma (,).

Secondly, the correct syntax for background-size in the shorthand version should come after the forward slash (/).

The corrected code snippet should look like this:

let style = {
    background:
        `linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)
          ), url("${ place.imgUri }") no-repeat center center / cover`
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Firebase authentication with customizable dynamic URL routing

I am working on displaying a list of restaurants within a select tag, allowing users to easily select a restaurant. Here is what I have tried so far: class RestaurantSelector extends Component { this.state = { selectedRestaurant: "", } re ...

reactjs

Creating Visuals with CSS Gradients: A Tutorial on Generating Images and SVG Files

I currently have a CSS gradient applied and I am interested in creating an image or SVG file from it. However, I am unsure of how to accomplish this task. Any advice would be greatly appreciated. background: -webkit-linear-gradient(bottom, rgb(211, 208, ...

css

Guide to expanding the sidebar width

As I delve into the world of CSS, I find myself puzzled by the issue of expanding the sidebar to ensure that the "Gestion des utilisateurs" section appears on a single line. https://i.stack.imgur.com/xzFEA.png To provide context, I have included an illus ...

css

Prevent a click event from triggering on one div when another div is clicked using jQuery

I am in the process of designing a website that includes two clickable divs, "#coloursettings" and "#powersettings". Both of these divs successfully unbind the menu ("#tab a"), but I am struggling to make them deactivate each other upon clicking one, then ...

jqueryhtmlcssbindunbind

Traversing through the BottomTabBar within a nested Stack Navigator results in an increased number of renders compared to

I have configured a bottom tab bar with a screen that I want to be hidden from the tabs, meaning it should not show up as a tab. To achieve this, I created a Native Stack and set the initial screen of that stack to the bottom tab stack. However, when I nav ...

reactjsreact-nativereact-hooksreact-navigationreact-navigation-bottom-tab

Hmm, seems like there's an issue with the touchable child - it must either be native or forward setNativeProps to

Currently enrolled in a ReactNative course on Coursera, I am facing an error in a 4-year-old course: "Touchable child must either be native or forward setNativeProps to a native component." I am unsure about this error and would greatly appreciate any hel ...

javascriptreactjsreact-native

Achieve the highest character count possible within HTML elements

Is it possible for a standard HTML element with defined width and height to manage characters using JavaScript, as shown in the code snippet below? <div id="text-habdler-with-width-and-height" ></div> <script> $("element& ...

javascripthtmlcss

Utilizing D3.js: Applying Multiple Classes with Functions

My current project involves using D3.js and I've encountered a particular challenge that has me stumped. In the CSV file I'm working with, there are columns labeled "Set" and "Year". My goal is to extract values from these columns and use them a ...

javascripthtmlcsssvgd3.js

Having issues with getting Bootstrap to function properly in my create-react-app

I've been attempting to use traditional Bootstrap instead of react-bootstrap to render my React component, but I can't seem to get it right. I've installed Bootstrap via npm and included the CDN links and scripts as well. Despite trying vari ...

javascriptreactjsnpmbootstrap-4

Custom message and format displayed by DatePicker when in initial state

I have implemented a DatePicker for date input in the user interface. Currently, I am struggling to display the date format as a placeholder or an empty string, as it defaults to showing the current date when the value attribute is not set. <DatePicker ...

reactjsmaterial-ui

The initial menu option stands out due to its unique appearance, created using the :first-child

I am currently designing a website menu and I would like the .current-menu-item - current item, to have a different appearance. However, I want the first item in this menu to have rounded corners (top left, bottom left). How can I achieve this using the :f ...

htmlcsscss-selectors

Learn how to iterate over an array and display items with a specific class when clicked using jQuery

I have an array with values that I want to display one by one on the screen when the background div is clicked. However, I also want each element to fade out when clicked and then a new element to appear. Currently, the elements are being produced but th ...

javascriptjqueryhtmlcss

The functionality of "exportTrailingSlash: true" is not performing as intended, causing links to not properly redirect to the

I am currently working with nextjs and attempting to perform a static export. My configuration in the next.config.js file is as follows: module.export = { exportTrailingSlash: true, } During development, I write links without the suffix. For example, ...

reactjsreact-nativenext.js

Tips for decreasing the placeholder font size within a mobile media query

I'm encountering a strange issue. I successfully managed to decrease the font size of the placeholder text for my desktop design, but it's not working for my mobile phone media query. I started with the desktop version and used a max width of 480 ...

htmlcss

The strange behavior of !important, display:none, and .height()

While working with a piece of JS code yesterday, I stumbled upon something peculiar. There was a div element that was initially hidden using display:none, and I was utilizing its height in some JavaScript calculations. Everything was functioning properly u ...

javascriptjquerycss

How can I duplicate or extract all the formatting applied to a specific text selection in Ckeditor?

I am currently utilizing CKEditor version 3.6 within my Asp.net MVC 3 Application. One of my tasks involves creating a Paint format option similar to Google Docs. I am looking to integrate this feature into CKEditor. Is there a way in CKEditor to transfe ...

javascriptasp.netcssasp.net-mvcckeditor

The functionality of State in react-native is not functioning as expected

I have an array that I am mapping like this: {activeNewsCategories.map((i) => ( <Tags key={i} tagName={i} getNewsByCategory={getNewsByCategory} /> ...

reactjsreact-native

Error encountered: Dependency "@babel/core" is missing any content

Can anyone provide guidance on what to do in this situation? I've tried running "npm install" as suggested, but it resulted in the same error. I've also searched online, but haven't found a solution on stackoverflow. Your assistance would b ...

reactjsnpmbabeljs

Error: Expecting only one React element child to be passed into React.Children.only() function

I am encountering an issue while attempting to construct a web table using the antd library. The exact error message reads: "react.development.js:1251 Uncaught Error: React.Children.only expected to receive a single React element child". I have been stru ...

javascriptreactjsnext.jsantd

Is there a way to effectively utilize meta tags with dynamic values in react js?

Does anyone have knowledge on using dynamic values in meta tags with react js? I need help visualizing my requirements, please refer to the accompanying image. In order to meet React's requirement of wrapping complete HTML inside a single tag, I am ...

reactjsmeta-tags