{"id":55,"date":"2011-05-12T00:00:54","date_gmt":"2011-05-12T10:00:54","guid":{"rendered":"http:\/\/mymonkeydo.com\/?p=55"},"modified":"2020-05-03T16:44:09","modified_gmt":"2020-05-04T02:44:09","slug":"resizing-background-image","status":"publish","type":"post","link":"https:\/\/mymonkeydo.com\/resizing-background-image\/","title":{"rendered":"Resizing Background Image"},"content":{"rendered":"<h2>Demo: Resizing Background Image Demo<\/h2>\n<h2>Problem:<\/h2>\n<p>I&#8217;ve been given a project to make a background image resize with the browser window size while retaining its ratio, not causing scrollbars, and always filling up the whole window. \u00a0It seems pretty easy until you actually see it. \u00a0Here&#8217;s a real life example of it: \u00a0<a href=\"http:\/\/ringvemedia.com\/\">http:\/\/ringvemedia.com\/<\/a>. \u00a0As you can see it pans as the browser is resized larger until a certain point and then it expands. \u00a0It never breaks its width to height ratio.<\/p>\n<h2>Solution:<\/h2>\n<p>The solution is quite simple. \u00a0It only involves using some CSS and a table.<\/p>\n<p>First we need to make sure the image doesn&#8217;t overflow and cause scrollbars.<\/p>\n<pre>html,body,#bg,#bg table,#bg td {\n    width:100%;\n    height:100%;\n    overflow:hidden\n}<\/pre>\n<p>Then we need to center the div and make sure it&#8217;s not too small.<\/p>\n<pre>#bg {\n    position:absolute;\n    width:200%;\n    height:200%;\n    top:-50%;\n    left:-50%;\n}<\/pre>\n<p>Finally, center the image.  I&#8217;m not exactly sure why a table is needed in the html, but it does work better in filling the window with it in.<\/p>\n<pre>#bg td {\n    vertical-align:middle;\n    text-align:center;\n}\n\n#bg img {\n    min-height:50%;\n    min-width:50%;\n    margin:0 auto;\n}<\/pre>\n<p>This is some pretty unique css coding and I&#8217;ve seen it in a couple places. \u00a0Surprisingly (not), it&#8217;s the same code at both sites! \u00a0I wonder who copied who? \u00a0Well, I can&#8217;t say I didn&#8217;t do that either.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[2],"tags":[17,36],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Resizing Background Image - My Monkey Do<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mymonkeydo.com\/resizing-background-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Resizing Background Image - My Monkey Do\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mymonkeydo.com\/resizing-background-image\/\" \/>\n<meta property=\"og:site_name\" content=\"My Monkey Do\" \/>\n<meta property=\"article:published_time\" content=\"2011-05-12T10:00:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-04T02:44:09+00:00\" \/>\n<meta name=\"author\" content=\"Webhead\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Webhead\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mymonkeydo.com\/resizing-background-image\/\",\"url\":\"https:\/\/mymonkeydo.com\/resizing-background-image\/\",\"name\":\"Resizing Background Image - My Monkey Do\",\"isPartOf\":{\"@id\":\"https:\/\/mymonkeydo.com\/#website\"},\"datePublished\":\"2011-05-12T10:00:54+00:00\",\"dateModified\":\"2020-05-04T02:44:09+00:00\",\"author\":{\"@id\":\"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829\"},\"breadcrumb\":{\"@id\":\"https:\/\/mymonkeydo.com\/resizing-background-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mymonkeydo.com\/resizing-background-image\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mymonkeydo.com\/resizing-background-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mymonkeydo.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resizing Background Image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mymonkeydo.com\/#website\",\"url\":\"https:\/\/mymonkeydo.com\/\",\"name\":\"My Monkey Do\",\"description\":\"A Log of Coding Solutions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mymonkeydo.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829\",\"name\":\"Webhead\",\"url\":\"https:\/\/mymonkeydo.com\/author\/corey\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Resizing Background Image - My Monkey Do","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mymonkeydo.com\/resizing-background-image\/","og_locale":"en_US","og_type":"article","og_title":"Resizing Background Image - My Monkey Do","og_url":"https:\/\/mymonkeydo.com\/resizing-background-image\/","og_site_name":"My Monkey Do","article_published_time":"2011-05-12T10:00:54+00:00","article_modified_time":"2020-05-04T02:44:09+00:00","author":"Webhead","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Webhead","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mymonkeydo.com\/resizing-background-image\/","url":"https:\/\/mymonkeydo.com\/resizing-background-image\/","name":"Resizing Background Image - My Monkey Do","isPartOf":{"@id":"https:\/\/mymonkeydo.com\/#website"},"datePublished":"2011-05-12T10:00:54+00:00","dateModified":"2020-05-04T02:44:09+00:00","author":{"@id":"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829"},"breadcrumb":{"@id":"https:\/\/mymonkeydo.com\/resizing-background-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mymonkeydo.com\/resizing-background-image\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mymonkeydo.com\/resizing-background-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mymonkeydo.com\/"},{"@type":"ListItem","position":2,"name":"Resizing Background Image"}]},{"@type":"WebSite","@id":"https:\/\/mymonkeydo.com\/#website","url":"https:\/\/mymonkeydo.com\/","name":"My Monkey Do","description":"A Log of Coding Solutions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mymonkeydo.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829","name":"Webhead","url":"https:\/\/mymonkeydo.com\/author\/corey\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts\/55"}],"collection":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":0,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts\/55\/revisions"}],"wp:attachment":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/media?parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/categories?post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/tags?post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}