diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 721d43defec2a2..d585fd6bd85e30 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -467,9 +467,11 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         relativeFromPage: boolean = false
       ): string => {
         const relative = config.base === './' || config.base === ''
-        const cssAssetDirname = relative
-          ? getCssAssetDirname(cssAssetName)
-          : undefined
+        const encodedPublicUrls = encodePublicUrlsInCSS(config)
+        const cssAssetDirname =
+          encodedPublicUrls || relative
+            ? getCssAssetDirname(cssAssetName)
+            : undefined
 
         const toRelative = (filename: string) => {
           // relative base + extracted CSS