How to Properly Reference Images in CSS Files in Symfony 2?

Path of Assets in CSS Files in Symfony 2

This discussion focuses on finding a solution for referencing images in CSS files while maintaining the desired directory structure in Symfony 2. The goal is to address the issue of paths in CSS files and ensure that images are accessible without exposing original source files to the public.

Previous Solutions

Initial attempts involved hardcoding absolute paths in the CSS file, making the application incompatible with subdirectories. Assetic with filter="cssrewrite" was also used, but it resulted in incorrect path generation.

Current (Preferred) Solution

The preferred solution entails storing CSS files in the "Resources/assets/css" directory and images in the "Resources/public/images" directory. By relative referencing in the CSS file, such as "url("../images/myimage.png")", the correct path is generated at compilation time. This approach works flawlessly in both dev and production environments.

Discussion and Analysis

The author conducted extensive testing using various combinations of @notation, relative notation, CSS rewrite, image background versus src, and parsing with and without assetic. The results revealed that only specific options yielded the desired behavior.

Solution Explanation

The successful approach required:

1. Storing images in the "public" directory.
2. Building CSS from the "public" directory using assetic.
3. Using direct tags with src from the "public/images" directory.

Final Thoughts and Considerations

For added security, it is recommended to store original CSS files in the "assets" directory and have your deployment process copy them to the "public" directory before compilation. Alternatively, it remains possible to store originals in the "public" directory for --symlink usage during development, provided you script the removal of these files post-compilation.

The above is the detailed content of How to Properly Reference Images in CSS Files in Symfony 2?. For more information, please follow other related articles on the PHP Chinese website!