{"id":1737,"date":"2018-03-17T11:40:23","date_gmt":"2018-03-17T16:40:23","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1737"},"modified":"2018-03-17T11:40:23","modified_gmt":"2018-03-17T16:40:23","slug":"meteor-use-image-background-css","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/03\/17\/meteor-use-image-background-css\/","title":{"rendered":"Meteor: How to use an image background in your CSS"},"content":{"rendered":"<p>To use images in Meteor, we <mark>must first create a top level &#8216;public&#8217; folder<\/mark> and place our images folder inside of it. This is because Meteor is a full stack framework that takes care of both the client side and the server side. On the server side, images would normally be placed in a public\/images folder. For example, here is what the folder structure looks like in Atom:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1738\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/03\/public-images.png\" alt=\"\" width=\"276\" height=\"340\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/03\/public-images.png 276w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/03\/public-images-244x300.png 244w\" sizes=\"auto, (max-width: 276px) 100vw, 276px\" \/><\/p>\n<p>Then, if we want to use a background image for a page, we can set it up in the CSS exactly as we normally would, with one caveat. In the main.css file for example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">body {\r\n  background-color: black;\r\n  background-image: url(\"\/images\/starry_forrest.jpg\");\r\n}<\/pre>\n<p>Notice I am calling my background image using a relative path to the &#8216;images&#8217; folder and am making no reference to the public folder:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">\/images\/starry_forrest.jpg<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To use images in Meteor, we must first create a top level &#8216;public&#8217; folder and place our images folder inside of it. This is because Meteor is a full stack framework that takes care of both the client side and the server side. On the server side, images would normally be placed in a public\/images &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/03\/17\/meteor-use-image-background-css\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Meteor: How to use an image background in your CSS<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,117],"tags":[10,116],"class_list":["post-1737","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-meteor","tag-css","tag-meteor"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1737"}],"version-history":[{"count":6,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1737\/revisions"}],"predecessor-version":[{"id":1746,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1737\/revisions\/1746"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}