# CSS background-image works on localhost, but not on deployment

**URL:** https://discourse.roots.io/t/css-background-image-works-on-localhost-but-not-on-deployment/27741
**Category:** sage
**Tags:** deploys, sage10
**Created:** 2024-07-06T19:12:32Z
**Posts:** 1

## Post 1 by @DrewTJohnson — 2024-07-06T19:12:32Z

I have the following block in my CSS that is supposed to add a background behind image blocks on the site.

```
.wp-block-image {
    figure {
        @apply relative
            z-10;
            figcaption {
                @apply text-center
                    bg-white/75
                    font-bold
                    mt-0
                    mb-0
                    p-2
                    text-sm;
            }
        &::before {
            @apply absolute
                block
                content-['']
                -top-3
                -right-3
                -bottom-3
                -left-3
                /* bg-plaid-background */
                -z-10;
                background-image: url('@images/plaid-background.jpeg');
        }
    }
}```

The CSS works if I point to ```http://localhost:3000``` but it doesn't work on the production site after running ```yarn build```.

This is my full bud config file:
```

export default async (app) =\> {

app  
.entry(‘app’, [‘@scripts/app’, ‘@styles/app’])  
.entry(‘editor’, [‘@scripts/editor’, ‘@styles/editor’])  
.assets([‘images’]);

app.setPublicPath(‘/app/themes/white-roses/public/’);

app  
.setUrl(‘[http://localhost:3000](http://localhost:3000)’)  
.setProxyUrl(‘[https://plaidsylvania.com](https://plaidsylvania.com)’)  
.watch([‘resources/views’, ‘app’]);

app.wpjson  
.setSettings({  
background: {  
backgroundImage: true,  
},  
color: {  
custom: false,  
customDuotone: false,  
customGradient: false,  
defaultDuotone: false,  
defaultGradients: false,  
defaultPalette: false,  
duotone: ,  
},  
custom: {  
spacing: {},  
typography: {  
‘font-size’: {},  
‘line-height’: {},  
},  
},  
spacing: {  
padding: true,  
units: [‘px’, ‘%’, ‘em’, ‘rem’, ‘vw’, ‘vh’],  
},  
typography: {  
customFontSize: false,  
},  
})  
.useTailwindColors()  
.useTailwindFontFamily()  
.useTailwindFontSize();  
};

```

```