{"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>&lt;img&gt; 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=&#8221;banner&#8221;]\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&lt;img \/&gt;<\/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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">&lt;!DOCTYPE html&gt;<br\/>&lt;html&gt;<br\/>&lt;head&gt;<br\/>&lt;style&gt;<br\/>body  {<br\/>    background-image: url(\u201cflower.gif&quot;);<br\/>    background-color: green;<br\/>}<br\/>&lt;\/style&gt;<br\/>&lt;\/head&gt;<br\/>&lt;body&gt;<br\/><br\/>&lt;h1&gt;Welcome to Wikitechy&lt;\/h1&gt;<br\/><br\/>&lt;\/body&gt;<br\/>&lt;\/html&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n","protected":false},"excerpt":{"rendered":"<p>Proper uses of IMG : &lt;img&gt; 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 [&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}]}}