Yii2 Assets: How to use image asset inside CSS file?

Question

I want to create an extension which contains an AssetBundle, which provides a simple static CSS file. In that static CSS file, I want to use an image file, which is also part of the extension.

How can I know the image file's URL so I can use it inside the CSS file?

If I register the image file as an asset, it will get a random URL that we cannot predict! So it would be impossible to do something like:

.some-selector { background: url('/assets/?????/image.jpg'); }

So, how can this be done?

For further clarification, here is an example folder structure of such extension:

extension/Widget.php - some widget that registers our AssetBundle
extension/AssetBundle.php - asset bundle that registers the css
extension/assets/css/style.css - the css
extension/assets/images/image.jpg - the image we want to use inside style.css

@LIJINSAMUEL Having a purely static CSS file which uses an image provided by the extension. — mae
– mae, Commented Mar 28, 2017 at 6:03
@LIJINSAMUEL No, the assets are in the extension's vendor folder, so they are not going to be in the application's assets folder. — mae
– mae, Commented Mar 28, 2017 at 6:06

Viktar Barysevich · Accepted Answer · 2017-03-28 07:22:08Z

1

In this case I would recommend to include also a new css files into the asset definition. In this case the image and css file will be in the assets folder and you can specify relative path, not absolute. e.g. /assets/a4dc56/image.jpg

/assets/a4dc56/style.css with the following content:

.some-selector {
    background: url('image.jpg');
}

answered Mar 28, 2017 at 7:22

Viktar Barysevich

361 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

mae Over a year ago

Brilliant. I knew there had to be an obvious solution. I ended up including the image through a relative path as such: background: url('../images/image.jpg');

Ibrahim.H Over a year ago

How about using AssetManager just like: $bundle = AppAsset::register($this); then: <img src="<?= $bundle->baseUrl.'/logo.png' ?>" />?

Collectives™ on Stack Overflow

Yii2 Assets: How to use image asset inside CSS file?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related