{"id":577,"date":"2017-03-16T14:24:19","date_gmt":"2017-03-16T14:24:19","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=577"},"modified":"2017-03-29T16:09:11","modified_gmt":"2017-03-29T10:39:11","slug":"use-img-vs-css-background-image","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/use-img-vs-css-background-image\/","title":{"rendered":"When to use IMG vs. CSS background-image"},"content":{"rendered":"<p><span style=\"color: #800000;\"><strong>Proper uses of IMG :<\/strong><\/span><\/p>\n<p><img> is a HTML tag. It has a purpose that is to display images on a web document.<\/p>\n<p><strong>Purpose:<\/strong><\/p>\n<ul>\n<li>Accessibility. When text based user agent renders the page alt attribute will be use.<\/li>\n<li>By default, browsers are not always set to print background image, so you can using img tag will be beneficial.<\/li>\n<li>This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.<\/li>\n<\/ul>\n<p><span style=\"color: #ff6600;\"><strong>Pragmatic uses of IMG :<\/strong><\/span><\/p>\n<ul>\n<li>Use\u00a0IMG\u00a0if you rely on browser scaling to render an image in proportion to text size.<\/li>\n<li>Use\u00a0IMG\u00a0for\u00a0multiple overlay images in IE6.<\/li>\n<li>Use\u00a0IMG\u00a0with a\u00a0z-index\u00a0in order to\u00a0stretch a background image\u00a0to fill its entire window. Note, this is no longer true with CSS3 background-size.<\/li>\n<li>Using\u00a0img\u00a0instead of\u00a0background-image\u00a0can dramatically\u00a0improve performance of animations over a background.<\/li>\n<\/ul>\n[ad type=\u201dbanner\u201d]\n<p><span style=\"color: #800080;\"><strong>CSS background-image :<\/strong><\/span><\/p>\n<ul>\n<li>Use CSS background images if the image is not part of the content.<\/li>\n<li>Use CSS background images when doing image-replacement of text e.g. paragraphs\/headers.<\/li>\n<li>Use background-image if you intend to have people print your page and you do not want the image to be included by default.<\/li>\n<li>Use background-image if you want to improve download times, as with CSS sprites.<\/li>\n<li>Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.<\/li>\n<li>Use background-image with background-size:cover in order to stretch a background image to fill its entire window.<\/li>\n<\/ul>\n<p><b>When to use\u00a0<img \/><\/b><\/p>\n<ul>\n<li>When Your Image need to be\u00a0indexed by search engine<\/li>\n<li>If it has relation to content not to design.<\/li>\n<li>If your image is not too small.<\/li>\n<li>Images anywhere you can add\u00a0alt\u00a0and\u00a0title\u00a0attribute.<\/li>\n<li>Images from a webpage which you want to print using print media css<\/li>\n<\/ul>\n<p><strong>When to use CSS\u00a0background-image <\/strong><\/p>\n<ul>\n<li>Images Purely Used to Design.<\/li>\n<li>No Relation With Content.<\/li>\n<li>Small Images which we can play with CSS3.<\/li>\n<li>Repeating Images (author icon , date icon will be repeated for each article etc.,).<\/li>\n<\/ul>\n<p><strong>CSS background-image Example Program:<\/strong><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Cstyle%3E%0Abody%20%20%7B%0A%20%20%20%20background-image%3A%20url(%E2%80%9Cflower.gif%22)%3B%0A%20%20%20%20background-color%3A%20green%3B%0A%7D%0A%3C%2Fstyle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%0A%3Ch1%3EWelcome%20to%20Wikitechy%3C%2Fh1%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n","protected":false},"excerpt":{"rendered":"<p>Proper uses of IMG : is a HTML tag. It has a purpose that is to display images on a web document. Purpose: Accessibility. When text based user agent renders the page alt attribute will be use. By default, browsers are not always set to print background image, so you can using img tag will [&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":[1087,1088,42,1094,1096,1089,1080,1079,1083,1095,1086,1091,1092,1090,1082,1093,1081,1085,1084],"class_list":["post-577","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-resolved-when-to-insert-an-image-in-html-vs-css","tag-background-image-vs-img-tag","tag-center-img-in-div","tag-css-background-image-cover","tag-css-background-image-position","tag-css-background-images-vs-html-img-tags","tag-html-img-tag-vs-div-background","tag-html-when-to-use-img-vs-css-background-image","tag-html-img-tag-vs-css-background-image","tag-image-in-css","tag-image-tag-vs-background-property","tag-image-replacement-of-text","tag-img-tag-background-cover","tag-img-vs-background-image-seo","tag-tag-vs-div-background-image-in-css","tag-victoria-secret-background","tag-vs-background-image-css-in-performance","tag-when-to-use-a-css-background-image","tag-when-to-use-an-img-tag"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/577","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=577"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/577\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}