{"id":33845,"date":"2017-10-26T03:01:24","date_gmt":"2017-10-25T17:01:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=33845"},"modified":"2017-10-25T20:55:18","modified_gmt":"2017-10-25T10:55:18","slug":"css3-background-size-contain-and-cover-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-background-size-contain-and-cover-primer-tutorial\/","title":{"rendered":"CSS3 Background Size Contain and Cover Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/bs_contain_cover.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Background Size Contain and Cover Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/bs_contain_cover.jpg\" title=\"CSS3 Background Size Contain and Cover Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Background Size Contain and Cover Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got a fairly simple but fairly useful lesson today with respect to a CSS styling improvement introduced with CSS3, the <a target=_blank title='CSS Background Size property information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_backgrounds.asp#google_ads_iframe_\/16833175\/MidContent_0'>Background Size<\/a> property that allows you to specify the size of background images.<\/p>\n<p>How often have you mismatched (the size of) a background image to the contents it is backgrounded against, and involved the <a target=_blank title='CSS Background-repeat property information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_background-repeat.asp'>background-repeat<\/a> property, much to your chagrin, perhaps?<\/p>\n<p>You can try this simple illustration of two useful <i>background-size<\/i> values, namely &#8230;<\/p>\n<ul>\n<li>\n<blockquote cite='https:\/\/www.w3schools.com\/css\/css3_backgrounds.asp#google_ads_iframe_\/16833175\/MidContent_0'><p>The contain keyword scales the background image to be as large as possible (but both its width and its height must fit inside the content area). As such, depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image.<\/p><\/blockquote>\n<li>\n<blockquote cite='https:\/\/www.w3schools.com\/css\/css3_backgrounds.asp#google_ads_iframe_\/16833175\/MidContent_0'><p>The cover keyword scales the background image so that the content area is completely covered by the background image (both its width and height are equal to or exceed the content area). As such, some parts of the background image may not be visible in the background positioning area.<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<p> &#8230; at today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/bs_contain_cover.html\" title=\"Click picture\">live run<\/a> link with its underlying serverside HTML and CSS code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/bs_contain_cover.html_GETME\" title=\"\/HTMLCSS\/bs_contain_cover.html\">bs_contain_cover.html<\/a> as you wish.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d33845' onclick='var dv=document.getElementById(\"d33845\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css3\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33845' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve got a fairly simple but fairly useful lesson today with respect to a CSS styling improvement introduced with CSS3, the Background Size property that allows you to specify the size of background images. How often have you mismatched (the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-background-size-contain-and-cover-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[126,127,2370,2369,281,282,576,590,997,2272,1319],"class_list":["post-33845","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-background","tag-background-image","tag-contain","tag-cover","tag-css","tag-css3","tag-html","tag-image","tag-programming","tag-size","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33845"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=33845"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33845\/revisions"}],"predecessor-version":[{"id":33848,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33845\/revisions\/33848"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=33845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=33845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=33845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}