diff --git a/_config.yml b/_config.yml index 5c90cc3..41e8355 100644 --- a/_config.yml +++ b/_config.yml @@ -2,7 +2,7 @@ title: Site Title description: Describe your website here. disqus_shortname: #Comment out url when working locally to resolve base urls correctly -url: http://your-website.com +url: http://localhost:4000 # Owner/author information owner: @@ -22,6 +22,9 @@ owner: # For Google Authorship https://plus.google.com/authorship google_plus: +# Background image to be tiled on all pages +background: ps_neutral.png + # Analytics and webmaster tools stuff goes here google_analytics: google_verify: diff --git a/_posts/2013-10-26-background-image.md b/_posts/2013-10-26-background-image.md new file mode 100644 index 0000000..812d8a9 --- /dev/null +++ b/_posts/2013-10-26-background-image.md @@ -0,0 +1,23 @@ +--- +layout: post +title: Post with a Background Image +description: "Sample post with a background image CSS override." +tags: [sample post] +image: + background: triangular.png +comments: true +share: true +--- + +Here be a sample post with a custom background image. To utilize this "feature" just add the following YAML to a post's front matter. + +{% highlight yaml %} +image: + background: filename.png +{% endhighlight %} + +This little bit of YAML makes the assumption that your background image asset is in the `/images` folder. If you place it somewhere else or are hotlinking from the web, just include the full http(s):// URL. Either way you should have a background image that is tiled. + +If you want to set a background image for the entire site just add `background: filename.png` to your `_config.yml` and BOOM --- background images on every page! + +
Background images from Subtle Patterns (Subtle Patterns) / CC BY-SA 3.0
\ No newline at end of file diff --git a/about.md b/about.md index d3c1bce..20e2116 100644 --- a/about.md +++ b/about.md @@ -18,6 +18,7 @@ They say three times the charm, so here is another free responsive Jekyll theme * Gracefully degrads in older browsers. Compatible with Internet Explorer 8+ and all modern browsers. * Modern and minimal design. * Sweet animated menu. +* Background image support. * Readable typography to make your words shine. * Support for large images to call out your favorite posts. * Comments powered by [Disqus](http://disqus.com) if you choose to enable. diff --git a/images/ps_neutral.png b/images/ps_neutral.png new file mode 100644 index 0000000..c3a53ac Binary files /dev/null and b/images/ps_neutral.png differ diff --git a/images/triangular.png b/images/triangular.png new file mode 100644 index 0000000..7f41795 Binary files /dev/null and b/images/triangular.png differ diff --git a/images/witewall_3.png b/images/witewall_3.png new file mode 100644 index 0000000..684447f Binary files /dev/null and b/images/witewall_3.png differ diff --git a/theme-setup.md b/theme-setup.md index aa012f5..81794f6 100644 --- a/theme-setup.md +++ b/theme-setup.md @@ -165,6 +165,19 @@ links: external: true {% endhighlight %} +#### Background Images + +To utilize this "feature" just add the following YAML to a post's front matter. ([View demo](http://mmistakes.github.io/hpstr-jekyll-theme/background-image/)) + +{% highlight yaml %} +image: + background: filename.png +{% endhighlight %} + +This little bit of YAML makes the assumption that your background image asset is in the `/images` folder. If you place it somewhere else or are hotlinking from the web, just include the full http(s):// URL. Either way you should have a background image that is tiled. + +If you want to set a background image for the entire site just add `background: filename.png` to your `_config.yml` and BOOM --- background images on every page! + #### Other Stuff The rest is just your average Jekyll config settings. Nothing too crazy here...