reference static asset location in .css with vite

How I can reference font or image location (static asset) in .css file for example in .css file like this:

body {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    background-image: url('../im/Background.jpg') /* how refrence  background.jpg location*/
}
@font-face {
    font-family: "test";
    font-style: normal;
    font-weight: 100;
    src: url("../../fonts/test.woff");/* how refrence  test.woff file location */
}

the .css file defined in vite.config.js and processed by Vite when running npm run {build/dev}. but reference to the location of static asset is not correctly done. if I load .css file with

  <link href="{{ asset('build/assets/file_name.css') }}" rel="stylesheet">

every thing is OK and it work. but if I load (refrence) .css file with @vite directive like this

@vite(['resources/css/file_name.css'])

it is not work (static asset location referencing have problem), any help apricated.