# Uxp react not rendering background image on css

**URL:** https://forums.creativeclouddeveloper.com/t/uxp-react-not-rendering-background-image-on-css/6824
**Category:** UXP Developer Tool
**Tags:** ui, uxp, javascript
**Created:** [September 15, 2023, 10:13pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-not-rendering-background-image-on-css/6824 "2023-09-15T22:13:49Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Adobe256](https://avatars.discourse-cdn.com/v4/letter/a/3e96dc/32.png) [@Adobe256](https://forums.creativeclouddeveloper.com/u/Adobe256)
#### Post date: [September 15, 2023, 10:13pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-not-rendering-background-image-on-css/6824/1 "2023-09-15T22:13:49Z")

</div>

Someone give me an idea here. All my image files are working well when I import them and include them on my .jsx script. Now issue is, when am using an extenal css file and I include a background image on a css property as showed below, that image never renders. Inshort it’s just a blank space for that image. Could I be missing something on uxp react webpack configuration for this because it’s quite weird.

> login-header-icon-image {  
> display: inline-block;  
> background-image: url(…/farmer.png);  
> background-repeat: no-repeat;  
> transition: 0.2s opacity ease-in-out;  
> }

My webpack configurations for file loading are as below and I don’t think they’re the issue. Although I think I have to enable something for webpack to process this for uxp react but am not sure what it is,

```
{
			test: /\.(png|jpg|jpeg|svg)$/,
			exclude: /node_modules/,
			loader: 'file-loader',
		},

```

What could be the issue. Anyone with an idea?

---

<div class="post-metadata">

### Author: ![shuji](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/shuji/32/4905_2.png) [@shuji](https://forums.creativeclouddeveloper.com/u/shuji)
#### Post date: [September 16, 2023, 7:07am UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-not-rendering-background-image-on-css/6824/2 "2023-09-16T07:07:48Z")

</div>

UXP still doesn’t support CSS transition and animation.  
I’m not sure it causes the issue but it’s better to remove it .

---

<div class="post-metadata">

### Author: ![Adobe256](https://avatars.discourse-cdn.com/v4/letter/a/3e96dc/32.png) [@Adobe256](https://forums.creativeclouddeveloper.com/u/Adobe256)
#### Post date: [September 16, 2023, 9:57am UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-not-rendering-background-image-on-css/6824/3 "2023-09-16T09:57:00Z")

</div>

Awesome . I didn’t know. Where do they post features which uxp supports and doesn’t support?

---

<div class="post-metadata">

### Author: ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)
#### Post date: [September 16, 2023, 10:05am UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-not-rendering-background-image-on-css/6824/4 "2023-09-16T10:05:01Z")

</div>

I don’t know how up to date this is:  
[https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-css/](https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-css/)

---

<div class="post-metadata">

### Author: ![shuji](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/shuji/32/4905_2.png) [@shuji](https://forums.creativeclouddeveloper.com/u/shuji)
#### Post date: [September 16, 2023, 1:38pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-not-rendering-background-image-on-css/6824/5 "2023-09-16T13:38:51Z")

</div>

it notes that “CSS transitions and animations are not supported”

[https://developer.adobe.com/photoshop/uxp/2022/uxp-api/known-issues/#css](https://developer.adobe.com/photoshop/uxp/2022/uxp-api/known-issues/#css)

and you see available CSS functions list here as Timothy\_Bennett showed.

[https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-css/](https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-css/)

not only animation, like grid-layout and some other advanced CSS features haven’t been supported yet.

---

<div class="post-metadata">

### Author: ![DavideBarranca](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/davidebarranca/32/1523_2.png) [@DavideBarranca](https://forums.creativeclouddeveloper.com/u/DavideBarranca)
#### Post date: [September 17, 2023, 9:51am UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-not-rendering-background-image-on-css/6824/6 "2023-09-17T09:51:02Z")

</div>

Correct, CSS support is basic right now, but I believe some new properties will be added soon(ish).  
@Jarda happens to be a reliable source in terms of missing CSS support, he’s investigated it thoroughly.

---

<div class="post-metadata">

### Author: ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)
#### Post date: [September 17, 2023, 4:44pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-not-rendering-background-image-on-css/6824/7 "2023-09-17T16:44:20Z")

</div>

> [@Adobe256](#):
>
> include a background image on a css property as showed below, that image never renders. Inshort

It is not up to date at all. Many properties have been supported since UXP 3. Now we have 7.2 but those are still not listed there. Your best bet would be base64 encoding.
