What is the method for placing an image retrieved from a pointer as the background image?

In my code, I am retrieving an image from a specific source:

<img src={event.eventData?.foto_portada} />

The issue arises when I attempt to utilize that image within my CSS properties as shown below:

.background-image {
  background-image: url();
  filter: blur(100px);
  -webkit-filter: blur(100px);
  height: 100%;
  width: 100%;
  opacity: 0.33;
  pointer-events: none;
  left: 0;
  position: absolute;
  right: 0;
}

At this point, I am unsure of what steps to take.

Interestingly, the CSS code successfully worked when I used a random image and assigned the corresponding class name to a div like so:

 <div className="background-image"></div>

However, upon trying to replicate this behavior with the correct image (as the image varies based on the event being referenced), it no longer functions as expected!

javascripthtmlcssreactjs

Answer №1

To modify the element's CSS, use the style prop:

<div className="background-image" style={{
  backgroundImage: `url(${event.eventData?.foto_portada})`
}}></div>

For instance:

const CustomStyleExample = ({ imgUrl }) => (
  <div className="background-image" style={{
    backgroundImage: `url(${imgUrl})`
  }}></div>
)

const imageUrl = 'https://picsum.photos/200/300'

ReactDOM
  .createRoot(root)
  .render(<CustomStyleExample imgUrl={imageUrl} />)
.background-image {
  filter: blur(5px);
  height: 100%;
  width: 100%;
  opacity: 0.33;
  pointer-events: none;
  left: 0;
  position: absolute;
  right: 0;
}
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>

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

Passing a Value from Child to Parent Function in Meteor: A Complete Guide

I am trying to pass the value of a result from a child element to its parent element. Initially, I used Session.set and Session.get which worked fine but I realize that using Sessions globally is not considered good practice. So, I attempted to utilize rea ...

javascriptjsonmeteor

When text is selected by triple clicking or over-selecting, it will create extra lines when pasted

When using React/Typescript, I have a function that shows user input: function displayMessage({ message }: UserMessage) { return ( <div> {message.split('\n').map((line) => ( <Fragment>{line} ...

htmlcssreactjstypescript

Modifying the appearance of InputText through CSS encapsulation

I'm a newbie to using Blazor and I'm currently experimenting with changing the style of InputText by utilizing css isolation. Interestingly, I've managed to successfully change the style when setting it inline or internally, however, things ...

cssasp.net-coreblazor.net-7.0asp.net-core-css-isolation

To ensure the react page is not rendered until the script has finished executing, follow these steps in React

Upon fetching data from an API using my script, I encounter a challenge where the react page loads before the script finishes loading. As a result, I end up with a page lacking necessary information and have to refresh in order to see the updates. The ma ...

javascriptreactjs

Use the css file specifically for iPad devices

My goal is to load a specific CSS file only for iPads. I attempted the following approach: <link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px)" type="text/css"> While this method successfully loads the iPad styleshe ...

cssipadorientationstylesheet

The Vuex mutation does not execute synchronously and does not resolve as a promise

My vuex mutation doesn't work synchronously as expected. Here is the code: mutations: { computeStatusData(state, status) { if (status.active !== true) { return } const started = new Date(status.startedAt); started.setHour ...

javascriptvue.jsvuex

Programmatically changing the stylesheet does not seem to be working to apply the

I'm currently working on a feature that allows the User to customize the application's style. Index.html <!DOCTYPE html> <html> <head> <link id="style" rel="stylesheet" type="text/css" href="red-stylesheet.css" ...

javascriptcss

Having difficulty linking a click event to an Anchor tag within a React component

Here is the code snippet for ComponentA.js: This is the return statement inside the component return ( ...... <a id="MytoolTip" ...... <ComponentB content={ ` <div class="share_cart_tt ...

javascriptreactjsdom-events

What is the best way to retrieve the primaryText value within the onChange function of a SelectField component?

I am trying to access the primaryText from the onChange method of SelectField. However, onChange only provides (event,index,value). Here is my code snippet: <SelectField value={props.value} onChange={this.handleChange}> {props.opt ...

reactjsmaterial-ui

What is the best method for implementing HTML content within the main page content area - should I stick to pure HTML or consider utilizing Angular

I am working on a project that consists of HTML, JS, Bootstrap, and AngularJS. My website has multiple pages, each with its own template. However, I feel like the header, navigation, footer, etc., are not reusable and have to be written every time. Here i ...

javascripthtmlangularjslayoutbootstrap-4

Begin your meteor project with a remote MongoDB server on a Windows operating system

Currently tackling a project that requires me to integrate my meteor project with a remote MongoDB server on Windows. I successfully set the environment variable (MONGO_URL="DB LINK") from OSX using terminal commands, but I'm encountering difficulties ...

javascriptnode.jsmongodbmeteor

Steps for retrieving a constant value in a React component

Just starting out in React.JS and I'm working on a project with Node, but running into an issue: The problem arises when I try to customize the styling of a button from Material-UI, as it has to be done through a function even though it seems unneces ...

javascriptreactjs

The webpage is drifting sideways to the right without any content being displayed

Recently, I launched a new website and encountered an issue with a static page I designed. While it may not be a critical problem, it is certainly bothering me! If you want to check out the website in question, visit: In essence, I have used CSS to hide ...

htmlscrollbarhorizontal-scrolling

Confirm that the method has been called by utilizing the AVA testing framework

As I work on creating a unit test for my React component using tools like Ava and Enzyme, I encounter an issue. My goal is to create a simple unit test that checks if a certain method has been called. The test should pass if the method has indeed been call ...

javascriptunit-testingreactjsava

Displaying a specific division solely on mobile devices with jQuery

I need to implement a feature where clicking on a phone number div triggers a call. However, I only want this div to be displayed on mobile devices. To achieve this, I initially set the div to "display:none" and tried using jQuery to show it on mobile devi ...

javascriptjqueryhtmlcss

Troubleshooting: Why are my Angular 8 Carousel Slide Animations not functioning

Looking to create a carousel slideshow with images sliding from right to left and smoothly transition to the next image. All the necessary code can be found in this STACKBLITZ Here is the HTML snippet: <ngb-carousel *ngIf="images" [showNavigationArro ...

htmlcssangulartypescript

Footer flickers while changing routes

There seems to be a glitch where the footer briefly flashes or collapses when switching routes, specifically if the page is scrolled down to the middle. If at the top of the page, the transition works smoothly. This issue becomes more apparent on high refr ...

javascriptvue.jsvuejs3nuxt.jsnuxt3.js

Struggling with html code?

Struggling with some school work and facing a challenge. I need the menu to be centered, but it's not cooperating. My teacher was no help, so I'm turning to this website for assistance. This is what I have come up with: * { background-col ...

htmlcss

Not able to select option from AngularJS template

As a newcomer to AngularJS, I am facing a seemingly simple issue that has me stumped. While the problem does not lie within the AngularJS code itself, I suspect it is somehow related as testing it on a blank HTML page yielded the desired outcome. headers. ...

javascripthtmlangularjsselected

Contrasts between space and the greater than selector

Can you explain the distinction between selector 6 and selector 7 as outlined on the w3 website? Inquiring minds want to know. ...

htmlcss