SOLVED

SPFx Webpart: Reference images in css?

%3CLINGO-SUB%20id%3D%22lingo-sub-271358%22%20slang%3D%22en-US%22%3ESPFx%20Webpart%3A%20Reference%20images%20in%20css%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-271358%22%20slang%3D%22en-US%22%3E%3CP%3EHey%20there%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20very%20new%20to%20SPFx%26nbsp%3Bwebpart%20development%20and%20I'm%20just%20trying%20a%20few%20things.%3C%2FP%3E%3CP%3EHow%20do%20you%20correctly%20reference%20images%20in%20css%3F%20E.g.%20background-images.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20created%20a%20property%20where%20the%20user%20can%20add%20a%20URL%20to%20that%20background%20image%2C%20but%20I%20don't%20know%20how%20to%20access%20those%20properties%20within%20css.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EDoes%20anyone%20know%20how%20to%20achieve%20this%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-271410%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20Webpart%3A%20Reference%20images%20in%20css%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-271410%22%20slang%3D%22en-US%22%3Ethanks%20%3A)%3C%2Fimg%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-271390%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20Webpart%3A%20Reference%20images%20in%20css%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-271390%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Fabian%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20could%20use%20the%20property%20value%20on%20the%20React%20code%20(not%20CSS)%20and%20create%20that%20specific%20style%20there.%3C%2FP%3E%3CP%3ESee%20an%20example%20here%3A%26nbsp%3B%3CA%20title%3D%22https%3A%2F%2Freactjs.org%2Fdocs%2Fdom-elements.html%23style%22%20href%3D%22https%3A%2F%2Freactjs.org%2Fdocs%2Fdom-elements.html%23style%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Freactjs.org%2Fdocs%2Fdom-elements.html%23style%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ehope%20this%20helps%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

Hey there

 

I'm very new to SPFx webpart development and I'm just trying a few things.

How do you correctly reference images in css? E.g. background-images.

 

I created a property where the user can add a URL to that background image, but I don't know how to access those properties within css.

 

Does anyone know how to achieve this?

 

2 Replies
best response confirmed by Fabian Ackeret (New Contributor)
Solution

Hi Fabian

 

You could use the property value on the React code (not CSS) and create that specific style there.

See an example here: https://reactjs.org/docs/dom-elements.html#style

 

hope this helps

thanks :)