Setting background image with Jekyll-Assets - css

Question

I've searched documentation, stack overflow, Google and attempted every CSS variation I could think of and can't determine a way of setting an image as a background to a div or element tag such as body using CSS. Should be simple, right?
Attempts included:
#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 many more. Basically, I've tried every possible variation I could think of including many I didn't expect to work ahem, and my efforts to find an answer have been exhausted.
Can somebody with knowledge of Jekyll and Jekyll-Assets clarify for myself and future Jekyll initiates how to accomplish this task?

Answer 1

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

Answer 2

For me, only combination of changing css file extension to css.scss, together with #element { background: url(asset_path("uri/to/file.jpg")); }, necessarily with double quotation marks, worked.
Moreover, sometimes it won't copy the assets, and then I need to jekyll clean and rm -rf .asset-cache.
assets:
cache: false
in _config.yml may help as well.

Answer 3

This works with inline css:
<div style="background-image: url({% asset 1920x1080.jpg #path %})"></div>

Answer 4

I guess I got your problem. If your CSS file is on the root folder of your site you can use this expression
#element { background-image: url(images/image.jpg); }
If its in one folder deep like if the CSS file is in the CSS folder like so _CSS/Style.CSS then you need to change the URL accordingly
#element { background-image: url(../images/image.jpg); }
If its in two folder deep use this expression
#element { background-image: url(../../images/image.jpg); }

Answer 5

I was stumped by this too. I found a solution from the plugin author in one of the repos issues:
Assets processed by jekyll-assets are not passed through normal
StaticFiles process pipeline of Jekyll. Thus they do not process YAML
front matter. Also jekyll-assets are not process files with liquid. If
you need asset_path helper and you don't want to use SASS for example,
you can use ERB. Just rename your styles.css in styles.css.erb and
you'll be able to sue ERB in it:
#header { background-image: url(<%= asset_path "mybackground.png" %>); > }
ERB is a part of Ruby stdlib, so no extra gems are required to
use it. Take a look on jekyll-assets introduction for details about
ERB, SASS in jekyll-assets and so on.

Answer 6

The documentation makes no mention of it, but jekyll-assets (at least version 0.7.7) seems to support the same asset-path helpers as the sass-rails gem:
#element { background-image: url(image-path("image.jpg")); }
or, even more succinctly:
#element { background-image: image-url("image.jpg"); }

Answer 7

Jekyll defaults to _sass when compiling SASS files so if you changed that location of your files which is likely since you are using jekyll-assets then you need to update your _config.yml to use the new location. In the config file add:
sass:
sass_dir: _assets
As per the Jekyll Assets docs, _assets is the default location for jekyll-assets.
For built in SASS support you need to be using Jekyll version 2.0.0 or later.

Answer 8

This should work :)
#element { background-image: url({{ site.url }}/{{ asset-path }}/image.jpg); }
If you do not have a site-url set up
#element { background-image: url({{ asset-path }}/image.jpg); }
or
#element { background-image: url(images/image.jpg); }