{"id":183,"date":"2013-10-17T19:55:52","date_gmt":"2013-10-17T19:55:52","guid":{"rendered":"http:\/\/farmur.com\/journal\/?p=183"},"modified":"2014-08-30T18:41:12","modified_gmt":"2014-08-30T18:41:12","slug":"responsive-web-week-7-bg-images-vhvw-and-modal","status":"publish","type":"post","link":"http:\/\/farmur.com\/journal\/responsive-web-week-7-bg-images-vhvw-and-modal\/","title":{"rendered":"Responsive Web \u2013 Week 7 \u2013 BG Images, vh\/vw, and modal"},"content":{"rendered":"<p>This week found me focused on the resizing of text over images. \u00a0The problem I have been having is that my text is supposed to sit on my images and resize with it. \u00a0When I get the size right, the text doesn&#8217;t resize with the browser. \u00a0<a href=\"http:\/\/goo.gl\/3VSTrO\" target=\"_blank\">Here&#8217;s an example <\/a>of the original version, before my solution. \u00a0The issue could be solved by creating lots of media queries, but this means a lot of extra code and a lot of visual &#8220;jumps&#8221; when as the user resizes. \u00a0My solution meant that I used a unit called, &#8220;vh.&#8221; \u00a0<a href=\"http:\/\/goo.gl\/uiMl8p\" target=\"_blank\">Here&#8217;s an example<\/a> of my solution (go ahead and resize the browser). \u00a0Here&#8217;s an example of the code I used:<\/p>\n<pre>#home div.overlay-box &gt; p {\r\n    font-size: 1.5em;\r\n    font-size: 2.4vh;\r\n    margin-top: 12px; \r\n    margin-top: 2vh;\r\n}<\/pre>\n<p>First I set the size for browsers that don&#8217;t support &#8220;vh&#8221; then I readjust the size utilizing the vh suffix. \u00a0If you&#8217;re interested in vh &amp; vw <a href=\"http:\/\/snook.ca\/archives\/html_and_css\/vm-vh-units\" target=\"_blank\">check out this article<\/a>. What vh does is calculate the viewport height and calculate that into units. \u00a0Each vh is worth 1% of the height, making my 2.4vh above equal to 2.4% of whatever the browser height is. \u00a0This allows me make the text appear to move with the image in the background. \u00a0In order to make the background image resize based on height, and to repeat along the x-axis I used the following code:<\/p>\n<pre>.container &gt; #home {\r\n    background-image: url(..\/img\/01_bg.jpg);\r\n    -webkit-background-size: auto 100%;\r\n    -moz-background-size: auto 100%;\r\n    -o-background-size: auto 100%;\r\n    background-size: auto 100%;\r\n    background-repeat: repeat-x;\r\n    background-position: center center;\r\n}<\/pre>\n<p>The last thing I did on the site was create an animated modal window that will display more information about the pages if there is any. \u00a0Currently, the &#8220;i&#8221; in the green circle along the right hand side of the screen activates he modal. \u00a0Here&#8217;s the <a href=\"http:\/\/goo.gl\/TtXTs0\" target=\"_blank\">working example.<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week found me focused on the resizing of text over images. \u00a0The problem I have been having is that my text is supposed to sit on my images and resize with it. \u00a0When I get the size right, the text doesn&#8217;t resize with the browser. \u00a0Here&#8217;s an example of the original version, before my [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[8],"class_list":["post-183","post","type-post","status-publish","format-standard","hentry","category-responsive-web-1","tag-rweb"],"_links":{"self":[{"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/posts\/183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/comments?post=183"}],"version-history":[{"count":2,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/posts\/183\/revisions"}],"predecessor-version":[{"id":239,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/posts\/183\/revisions\/239"}],"wp:attachment":[{"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/media?parent=183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/categories?post=183"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/farmur.com\/journal\/wp-json\/wp\/v2\/tags?post=183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}