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%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
Highlighted
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
Highlighted
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

Highlighted
thanks :)