Setting background image with Jekyll
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?
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); }
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.
Try #element { background: url(asset_path("image.jpg")); } #element { background: url(asset_path("image.jpg")); } . It works for me.
下一篇: 用Jekyll设置背景图像