CSS で一貫した背景画像のパスを指定するにはどうすればよいですか?

Consistent Background Image Paths in CSS

When your CSS and image files reside in different directories, specifying the background image path can be tricky. This article explores a common issue faced when the CSS file is located in Project/Web/Support/Styles/file.css and the image is in Project/Web/images/image.png.

Problem Statement:

Despite attempts to reference the image using various paths (/images/image.png, ../images/image.png, etc.), the image fails to display in the intended CSS file.

Solution:

To correctly specify the path, it's important to understand directory navigation in CSS. The ../ syntax navigates up one directory level. In this case, where the CSS is in Project/Web/Support/Styles, the correct path is:

background-image: url('../../images/image.png');

This syntax navigates twice up the directory structure from file.css (../../) to reach the Web directory, where the images folder and image.png reside.

以上がCSS で一貫した背景画像のパスを指定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。