{"id":1738,"date":"2017-03-22T19:49:37","date_gmt":"2017-03-22T14:19:37","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1738"},"modified":"2017-03-28T18:40:26","modified_gmt":"2017-03-28T13:10:26","slug":"css-stretch-scale-css-image-background-css","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/css-stretch-scale-css-image-background-css\/","title":{"rendered":"[Solved &#8211; 9 Answers] CSS &#8211; HTML &#8211; Stretch and scale a CSS image in the background &#8211; with CSS only"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM:<\/label><\/p>\n<p>How to Stretch and scale a CSS image in the background \u2013 with CSS only ?<\/p>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>use the CSS3 property to do it .<\/li>\n<li>It resizes to ratio so that no image distortion will happen (although it does upscale small images).<\/li>\n<li>Just note, it\u2019s not implemented in all browsers yet.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dbackground-size%3A%20100%25%3B%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>CSS3 has a attribute called background-size:cover.<\/li>\n<li>This does not stretch the image, but it will crop the image accordingly.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<h4 id=\"html\"><span style=\"color: #ff6600;\"><b>HTML :<\/b><\/span><\/h4>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20id%3D%22background%22%3E%0A%20%20%20%20%3Cimg%20src%3D%22imgwiki.jpg%22%20class%3D%22stretch%22%20alt%3D%22%22%20%2F%3E%0A%3C%2Fdiv%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"css\"><span style=\"color: #808000;\"><b>CSS :<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d%23background%20%0A%7B%0A%20%20%20%20width%3A%20100%25%3B%20%0A%20%20%20%20height%3A%20100%25%3B%20%0A%20%20%20%20position%3A%20fixed%3B%20%0A%20%20%20%20left%3A%200px%3B%20%0A%20%20%20%20top%3A%200px%3B%20%0A%20%20%20%20z-index%3A%20-1%3B%20%2F*%20Ensure%20div%20tag%20stays%20behind%20content%3B%20-999%20might%20work%2C%20too.%20*%2F%0A%7D%0A.stretch%20%0A%7B%0A%20%20%20%20width%3A100%25%3B%0A%20%20%20%20height%3A100%25%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<h4 id=\"css-2\"><span style=\"color: #800080;\"><b>CSS :<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201dhtml%2Cbody%20%0A%7B%0A%20%20%20%20background%3A%20url(images%2Fbg.jpg)%20no-repeat%20center%20center%20fixed%3B%0A%20%20%20%20-webkit-background-size%3A%20cover%3B%20%2F*%20For%20WebKit*%2F%0A%20%20%20%20-moz-background-size%3A%20cover%3B%20%20%20%20%2F*%20Mozilla*%2F%0A%20%20%20%20-o-background-size%3A%20cover%3B%20%20%20%20%20%20%2F*%20Opera*%2F%0A%20%20%20%20background-size%3A%20cover%3B%20%20%20%20%20%20%20%20%20%2F*%20Generic*%2F%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dbackground-size%3A%20100%25%20100%25%3B%20%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>It stretches bg to fill entire element on both axis<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>Use this<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dbackground%3A%20url(\u2018imgwiki.png\u2019)%20no-repeat%3B%20%0Abackground-size%3A%20100%25%3B%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>You can add this class into your CSS file.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d.stretch%20%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20url(images%2Fwikitechy.jpg)%20no-repeat%20center%20center%20fixed%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-webkit-background-size%3A%20cover%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-moz-background-size%3A%20cover%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-o-background-size%3A%20cover%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-size%3A%20cover%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<ul>\n<li>In order to scale your images appropriately based on the container size , here is the following code :<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%7B%0Abackground-size%3Acontain%3B%0Abackground-repeat%3A%20no-repeat%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<ul>\n<li>We can do this through the CSS background-size property in CSS3.<\/li>\n<li>We\u2019ll use the html element (better than body as it\u2019s always at least the height of the browser window).<\/li>\n<li>We set a fixed and centered background on it, then adjust it\u2019s size using background-size set to the cover keyword<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dhtml%20%0A%7B%20%0A%20%20background%3A%20url(images%2Fwiki.jpg)%20no-repeat%20center%20center%20fixed%3B%20%0A%20%20-webkit-background-size%3A%20cover%3B%0A%20%20-moz-background-size%3A%20cover%3B%0A%20%20-o-background-size%3A%20cover%3B%0A%20%20background-size%3A%20cover%3B%0A%7D%0A\u201d message=\u201dCSS code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM: How to Stretch and scale a CSS image in the background \u2013 with CSS only ? SOLUTION 1: use the CSS3 property to do it . It resizes to ratio so that no image distortion will happen (although it does upscale small images). Just note, it\u2019s not implemented in all browsers yet. [pastacode lang=\u201dcss\u201d [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[3729,3728,3726,3724,3725,3730,3718,3716,3727,3723,3720,3715,3717,3722,2068,3719,3721],"class_list":["post-1738","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-background-size-cover-not-working","tag-css-background-image-center","tag-css-background-image-size-to-fit-screen","tag-css-background-image-stretch-to-fill","tag-css-background-size-cover","tag-css-image-stretch-to-fill","tag-css3-background-size-property","tag-height-should-auto-scale","tag-how-to-fit-background-image-in-html-using-notepad","tag-how-to-make-background-image-fit-to-screen-html","tag-how-to-resizeable-background-image","tag-html-css-background-image-to-fit-width","tag-html-css-stretch-or-fit-background-image","tag-html-stretch-background-image","tag-object-fit","tag-perfect-full-page-background-image","tag-scaling-background-images"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1738","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1738"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1738\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1738"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}