Customize your background image with Jekyll-Assets

Question

I searched the documentation, stack overflow, google and attempted every CSS change that I could think of, and cannot figure out how to set the image as the background for a div tag or element such as a body using CSS. It should be simple, right?

Attempts to include:

#element { background-image: url(<% asset_path "image.jpg" %>); } #element { background: url(<% asset_path "image.jpg" %>); } #element { background-image: url({% asset-path "image.jpg" %}); } #element { background-image: {% asset-path "image.jpg" %}; } #element { background-image: url("image.jpg"); } 

And a lot more. Basically, I tried all the possible options that I could think of, including many that I did not expect to work, and my attempts to find the answer were exhausted.

Can anyone who knows Jekyll and Jekyll-Assets clarify for themselves and the future Jekyll initiates how to complete this task?

Answer 1

I think I have your problem. If your CSS file is located in the root folder of your site, you can use this expression

 #element { background-image: url(images/image.jpg); } 

If it’s deep in one folder, as if the CSS file was in the CSS folder, for example _CSS/Style.CSS , you need to change the URL accordingly

 #element { background-image: url(../images/image.jpg); } 

If its in two folders deeply use this expression

 #element { background-image: url(../../images/image.jpg); } 

Answer 2

I was also shocked by this. I found a solution from the author of the plugin in one of the issues repos :

Assets processed by jekyll assets are not transferred through regular StaticFiles processed by the Jekyll pipeline. Thus, they do not handle the YAML front item. Also, jekyll assets are not liquid process files. If you need the asset_path helper and you don't want to use SASS, for example, you can use ERB. Just rename your styles.css to styles.css.erb and you can sue ERB:

 #header { background-image: url(<%= asset_path "mybackground.png" %>); > } 

ERB is part of Ruby stdlib, so no extra gems are required use this. Take a look at the introduction of jekyll-assets for more information on ERB, SASS in jekyll assets, etc.

Answer 3

Try #element { background: url(asset_path("image.jpg")); } #element { background: url(asset_path("image.jpg")); } . This works for me.

Answer 4

That should work :)

 #element { background-image: url({{ site.url }}/{{ asset-path }}/image.jpg); } 

If you don’t have a site URL setting

 #element { background-image: url({{ asset-path }}/image.jpg); } 

or

 #element { background-image: url(images/image.jpg); } 

Answer 5

The documentation does not mention this, but jekyll-assets (at least version 0.7.7) seems to support the same asset management assistant as sass -rails gem:

 #element { background-image: url(image-path("image.jpg")); } 

or, even more succinctly:

 #element { background-image: image-url("image.jpg"); } 

Answer 6

Jokyll uses _sass by default when compiling SASS files, so if you change this location of your files, which is probably since you have been using jekyll-assets , you need to update _config.yml to use the new location. In the configuration file add:

 sass: sass_dir: _assets 

According to the Jekyll Assets docs, _assets is the default location for jekyll assets.

For native SASS support, you need to use Jekyll version 2.0.0 or later.

Answer 7

For me, only the combination of changing the extension of the css file to css.scss works with #element { background: url(asset_path("uri/to/file.jpg")); } #element { background: url(asset_path("uri/to/file.jpg")); } , necessarily with double quotes.

In addition, sometimes it does not copy assets, and then I need jekyll clean and rm -rf .asset-cache .

 assets: cache: false 

in _config.yml may also help.