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

Inquiring about the best method to determine the intersection point between two lines in Draw i.o

Can someone please explain how to find the coordinate point where two lines intersect in draw i.o? I am looking for a Javascript function to solve this issue and get the coordinate of the point only. For example: ...

javascripthtmlcssdraw

"Utilize HTML to make inline-block elements appear small in size while giving the illusion of being

I have a group of inline-block elements (4 total), all arranged neatly in a single row. As the window size changes, the elements wrap to the next line accordingly. The page does not display scrollbars at the bottom until the browser width reaches the minim ...

htmlcsslayout

Incorporate a picture using just a portion of the character at the start of the file name in

I have a collection of images in my React assets folder, each with a unique code number: 10000_clear_large.png <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57666767676708343b323625083b3625303217652f79273930">[emai ...

reactjs

React.js not displaying image

Here's my App.js File I am trying to display an image from the MongoDB database. Click here to view the image stored in MongoDB The images are stored as Binary data in MongoDB How can I display the image on the React page? import React,{useState} fr ...

javascriptreactjs

Concealing a block from top to bottom

I currently have a filter that is hidden when clicked, with a transition effect that moves it from the bottom to the top. I have recorded my screen to demonstrate this behavior: . However, I now need the filter to hide from top to bottom instead, essenti ...

javascriptcssreactjsanimation

The <SelectField> component in material-ui is not displaying items properly in ReactJS

I am facing an issue with Material-UI where the items are not showing up. I am trying to display categories of products in a SelectField but it doesn't seem to be working. When I click on the SelectField, no items are displayed. Below is the code for ...

javascriptreactjsmaterial-ui

Is there a way to modify the style value within AngularJS?

<div class="meter"> <span style="width: 13%"></span> </div> I have the following HTML code snippet. I am looking to update the width value using AngularJS. Does anyone have a solution for this issue? ...

javascriptcssangularjs

Ways to create interactive images

<div className="col-lg-3 col-md-3"> <li> <img src='https://i.imgur.com/fe0T4nw.png' onClick="https://arizonaatwork.com" /> </li> </div> I am currently working on a project where I need to link an image ...

reactjsbootstrap-4

Is there a way to send an array of objects using axios-http?

Currently, I am utilizing react-dropzone for uploading mp3 files and a metadata npm to extract all the file contents. However, upon sending it to axios.post(), an error is encountered stating "Body Exceeded 1mb limit" Here is the snippet where the new dat ...

javascriptreactjsrestaxiosnext.js

Guide to vertically aligning text within a row using Bootstrap 5

I am currently struggling to achieve vertical alignment of text in the center of a row. Despite my efforts, I have not been successful in achieving the desired vertical alignment. What steps can be taken to ensure that the text is vertically centered with ...

htmlcsstwitter-bootstrapbootstrap-5

Unable to extract query parameters from URL using Express JS as req.query returns an empty object

I came across discussions about this issue here and here, but unfortunately, the solutions provided didn't work for me. I'm attempting to extract parameters from the URL using req.query. In my server.js file, I've implemented the following: ...

javascriptnode.jsreactjsexpress

What is the best way to ensure that the Bootstrap navbar remains collapsed at all times, regardless of the size of the

Is there a way to keep my Bootstrap navbar constantly collapsed regardless of the screen size? I'm currently using Bootstrap, and I've noticed that when the screen is larger, the navbar expands automatically. What can I do to ensure that the navb ...

cssnavbarbootstrap-5collapsable

The React JS @material-ui/core Select component encountered an error when attempting to access a property that does not exist: 'offsetWidth'

Struggling with the Select component from @material-ui/core, encountering the error below: Cannot read property 'offsetWidth' of null Any assistance would be greatly appreciated. Link: codesandbox Code: import React from "react"; import { ...

javascriptreactjsmaterial-ui

Looking for a SSR Component to Choose Dates?

In the process of designing a landing page, I encountered a challenge with incorporating a date picker feature. My goal is to have users select a date and then be redirected to another page upon clicking a button. The technology stack includes NextJS where ...

reactjstypescriptnext.jsreact-hooks

Required an Iterable, however, could not locate one for the field HotelAccommodationType.hotelRanking

mutation AddHolidayPackages($packageName:String, $destination:String,$country:String,$numberOfNights:Int, $citiesCovered:String,$highlights:String,$includes:String,$excludes:String,$dayWiseItinerary:[String], $termsandCondition ...

node.jsreactjsmongodbgraphql

Load React single-page application based on the specified route

I recently built a react-router-redux SPA and everything seems to be working great. However, I am facing an issue where regardless of the URL the user enters, the server always sends index.html and the application starts at the root route ('/'). ...

node.jsreactjsreduxreact-router

Tips for preserving axois GET response as a JSON object or in its original form upon arrival

export class LoadProfile extends Component { state = { data: '' } componentDidMount() { axios({ url: 'http://localhost:8080/profile/all', method: 'GET', responseType: 'json', ...

jsonreactjsaxios

Display Google Maps and YouTube videos once user consents to cookies

I recently installed a plugin on my WordPress site called Cookie Notice, which I found at this link. So far, I've been impressed with how user-friendly and lightweight it is. Due to the latest GDPR regulations, I now need to figure out a way to hide ...

javascripthtmlcsswordpress

Using a parent Id to implement React Material UI classes

How can I assign an id to a Material UI class when React renders it? For example: from .MuiInputLabel-outlined { z-index: 1; transform: translate(14px, 20px) scale(1); pointer-events: none; } to #root-id-here .MuiInputLabel-outlined { z- ...

reactjsmaterial-ui

When React Router updates the URL, it will display a different component - Material ui version 5.0

I am experiencing routing issues in React 18.0 while using react-router-dom v.5.0 and Material UI - 5.0. The Login component is not rendering as expected; instead, another component called "CreateNotes" is being rendered. Even though the URL shows /login, ...

reactjsreact-routermaterial-uireact-router-dom