{"id":887,"date":"2015-10-05T09:17:52","date_gmt":"2015-10-05T16:17:52","guid":{"rendered":"https:\/\/rmu.andrewyames.com\/?p=887"},"modified":"2015-10-05T09:17:52","modified_gmt":"2015-10-05T16:17:52","slug":"full-screen-backgrounds-update","status":"publish","type":"post","link":"https:\/\/rmu.andrewyames.com\/?p=887","title":{"rendered":"Full Screen Backgrounds &#8211; Update"},"content":{"rendered":"<p><a href=\"http:\/\/mediaweb.rmu.edu\/~djsst266\/demo\/fullscreen.html\">http:\/\/mediaweb.rmu.edu\/~djsst266\/demo\/fullscreen.html<\/a><\/p>\n<p>Hey all, here&#8217;s a solution for a fullpage image background I found in the wild (in a chrome new tab replacement called &#8216;Momentum&#8217;).<\/p>\n<p>It&#8217;ll work best for situations when you only need one pane\/screen-worth of space. The benefit is that it seems to maximize the amount of image visible.<\/p>\n<p>It works by\u00a0grabbing each end of the div and stretching it to the edge of the screen.<\/p>\n<p>If you really need to use it for multiple panes, change the &#8216;top&#8217; attribute of each page to [(page number &#8211; 1) * 100vh], so page 1 is top:0; page 2 is top:100vh; page 3 is top:200vh; etc.<\/p>\n<p>Here&#8217;s the code.<\/p>\n<pre>#fullscreen {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-image: url(mountains.jpg);\r\n background-position: center center;\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>http:\/\/mediaweb.rmu.edu\/~djsst266\/demo\/fullscreen.html Hey all, here&#8217;s a solution for a fullpage image background I found in the wild (in a chrome new tab replacement called &#8216;Momentum&#8217;). It&#8217;ll work best for situations when you only need one pane\/screen-worth of space. The benefit is that it seems to maximize the amount of image visible. It works by\u00a0grabbing each end &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/rmu.andrewyames.com\/?p=887\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Full Screen Backgrounds &#8211; Update&#8221;<\/span><\/a><\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,8],"tags":[],"class_list":["post-887","post","type-post","status-publish","format-standard","hentry","category-artm3210-html-toolbox","category-student-tutorials"],"_links":{"self":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/posts\/887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=887"}],"version-history":[{"count":3,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/posts\/887\/revisions"}],"predecessor-version":[{"id":891,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/posts\/887\/revisions\/891"}],"wp:attachment":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}