7

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?

James Targett
  • 93
  • 1
  • 6

8 Answers8

2

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

jupiteror
  • 1,085
  • 3
  • 24
  • 50
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.

Antek
  • 721
  • 1
  • 4
  • 27
2

This works with inline css:

<div style="background-image: url({% asset 1920x1080.jpg @path %})"></div>
Marco Ramires
  • 1,116
  • 1
  • 10
  • 19
1

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); }
Hossain Mohd Faysal
  • 817
  • 4
  • 7
1

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.

Jeff Poulton
  • 6,032
  • 1
  • 21
  • 12
0

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"); }
Steve Grossi
  • 2,765
  • 1
  • 22
  • 26
0

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.

Ash
  • 11,292
  • 4
  • 27
  • 34
-1

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); }
Hossain Mohd Faysal
  • 817
  • 4
  • 7