Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

gryzli83's avatar

Vite + background-image

Hello,

In my Laravel 10 project I have sass file and this code:

.slider{ height: 70.8rem; background-image: url('/img/helicopter.jpg'); }

When I run npm run build everything is fine, I can see this background image on the page, but when I run npm run dev the image disappears. How can I fix it?

My image files are in public folder.

0 likes
3 replies
JasperWelsing's avatar

I had this exact same problem. Solved it by moving the image(s) inside the resource folder and then changed the path relative to the css/sass file.

File structure

resources
├── css
    ├── img
        ├── helicopter.jpg
    ├── app.css

Inside app.css/sass file

.slider{ height: 70.8rem; background-image: url('../img/helicopter.jpg'); }

From the docs (found here)

Any assets referenced via a relative path will be re-written, versioned, and bundled by Vite.

BansheeDevelopment's avatar

@JasperWelsing

When using Vite with Laravel, images stored in the public directory might not be correctly referenced in your CSS during development (npm run dev). This happens because Vite serves files from a different base URL.

To resolve this issue, you can adjust the Vite configuration to handle static assets correctly and ensure the paths are consistent between development and production.

public/images/footer-bg.png

public/css/app.css

.footer-section.footer { background-image: url('/images/footer-bg.png'); }

vite.config.js:

resolve: {
    alias: {
        '/images': '/public/images',
    },
},

Use the @vite directive to load your CSS and JavaScript files in your Blade template (resources/views/layouts/app.blade.php):

@vite('resources/css/app.css')

2 likes

Please or to participate in this conversation.