{"id":1282,"date":"2013-09-14T04:54:24","date_gmt":"2013-09-14T04:54:24","guid":{"rendered":"http:\/\/www.phpmind.com\/blog\/?p=1282"},"modified":"2017-06-16T03:46:44","modified_gmt":"2017-06-16T03:46:44","slug":"how-to-use-css3-background-properties","status":"publish","type":"post","link":"https:\/\/www.phpmind.com\/blog\/2013\/09\/how-to-use-css3-background-properties\/","title":{"rendered":"How to use CSS3 background properties?"},"content":{"rendered":"<ul>\n<li>CSS3 introduces two new background properties-\n<ol>\n<li>background-size<\/li>\n<li>background-origin<\/li>\n<\/ol>\n<\/li>\n<li><span class=\"phpmind_text_heading_green\">background-size: <\/span>This property allows web designers to play with background images. Images can be squashed or stretched easily with the help of this property or in other words it is used to resize the background images. Earlier background images were used to appear on the browser in its actual size.<\/li>\n<li>\n<ol>\n<li><span class=\"phpmind_text_heading_green\">contain: <\/span>The Image is resized so it fits the container or we can say that the image is resized in such a way that its width and height(the bigger one) will not exceed the container\u2019s dimensions. Note: original size of the image is 400px x 400px.\n<pre lang=\"php\">      .div{\r\n           background:url(phpmind-background-size-image.jpg);\r\n\t   background-size: contain;\r\n\t   background-repeat:no-repeat;\r\n\t   width: 600px;\r\n           height:300px;\r\n\t   border:1px solid #999;\r\n           }<\/pre>\n<div class=\"phpmind_background_size\"><\/div>\n<\/li>\n<li><span class=\"phpmind_text_heading_green\">cover: <\/span>The keyword &#8220;cover&#8221; is also accepted by the background-size property. The image is resized in such a way that either its width and height (the smaller one) covers the whole container but the image could be cropped if the image has a different aspect ratio.\n<pre lang=\"php\">           .div{\r\n\t\tbackground:url(phpmind-background-size-image.jpg);\r\n\t\tbackground-size: cover;\r\n\t\tbackground-repeat:no-repeat;\r\n\t\twidth:\t600px;\r\n\t\theight:300px;\r\n\t\tborder:1px solid #999;\r\n\t\t}<\/pre>\n<div class=\"phpmind_background_size_cover\"><\/div>\n<\/li>\n<li><span class=\"phpmind_text_heading_green\">length: <\/span>It helps us to define the width and height of the background image. The first value represents the width of the image and the second value represent the height. If only one value is mentioned then it is assumed as a width and height is set to &#8220;auto&#8221;.\n<pre lang=\"php\">            .div{\r\n           \tbackground:url(phpmind-background-size-image.jpg);\r\n\t\tbackground-size:200px;\r\n\t\tbackground-repeat:no-repeat;\r\n\t\twidth:\t500px;\r\n\t\theight:300px;\r\n\t\tborder:1px solid #999;\r\n         \t}<\/pre>\n<div class=\"phpmind_background_size_cover_length\"><\/div>\n<\/li>\n<li><span class=\"phpmind_text_heading_green\">percentage: <\/span>If the value is given in percentage then the size of the background image is relative to the parent element. The first value represents the width of the image and the second value represent the height. If only one value is mentioned then it is assumed as a width and height is set to &#8220;auto&#8221;.eg: If the width and height of the background-size is set to 80% 50% respectively then the image will cover 80% width and 50% height of the parent element.\n<pre lang=\"php\">            .div{\r\n           \tbackground:url(phpmind-background-size-image.jpg);\r\n\t\tbackground-size:80% 50%;\r\n\t\tbackground-repeat:no-repeat;\r\n\t\twidth:\t500px;\r\n\t\theight:300px;\r\n\t\tborder:1px solid #999;\r\n         \t }<\/pre>\n<div class=\"phpmind_background_size_cover_percentage\"><\/div>\n<\/li>\n<\/ol>\n<p>Browser support: Firefox 4+, Safari 5+, IE9+, Chrome, and Opera.<\/li>\n<li><span class=\"phpmind_text_heading_green\">background-origin: <\/span>\u00a0The\u00a0Background-origin property allow web designers to determine the background position area in other words it helps us to know that the background position property will be positioned relative to the &#8220;content box&#8221;, &#8220;border box&#8221;, or the &#8220;padding box&#8221;.<\/li>\n<li>\n<ol>\n<li><span class=\"phpmind_text_heading_green\">content-box: <\/span>\u00a0The\u00a0background image will be placed under the content div or It is relative to the content box.\n<pre lang=\"php\">            .div{\r\n           \tbackground:url(phpmind-background-origin.jpg);\r\n\t\tbackground-origin: content-box;\r\n\t\tbackground-repeat: no-repeat;\r\n\t\twidth:\t300px;\r\n\t\theight:300px;\r\n\t\tpadding:20px;\r\n\t\tborder:10px dotted #39C;\r\n         \t   }<\/pre>\n<div class=\"phpmind_background_origin_content\"><\/div>\n<\/li>\n<li><span class=\"phpmind_text_heading_green\">padding-box: <\/span>\u00a0The\u00a0background image position is relative to the defined padding. The background image will cover the padding area also.\n<pre lang=\"php\">            .div{\r\n           \tbackground:url(phpmind-background-origin.jpg);\r\n\t\tbackground-origin: padding-box;\r\n\t\tbackground-repeat: no-repeat;\r\n\t\twidth:\t300px;\r\n\t\theight:300px;\r\n\t\tpadding:20px;\r\n\t\tborder:10px dotted #39C;\r\n         \t   }<\/pre>\n<div class=\"phpmind_background_origin_padding\"><\/div>\n<\/li>\n<li><span class=\"phpmind_text_heading_green\">border-box: <\/span>\u00a0The\u00a0background image position is relative to the border of the element.\n<pre lang=\"php\">            .div{\r\n                 background:url(phpmind-background-origin.jpg);\r\n\t         background-origin: border-box;\r\n\t\tbackground-repeat: no-repeat;\r\n\t\twidth:\t300px;\r\n\t\theight:300px;\r\n\t\tpadding:20px;\r\n\t\tborder:10px dotted #39C;\r\n         \t   }<\/pre>\n<div class=\"phpmind_background_origin_border\"><\/div>\n<\/li>\n<\/ol>\n<p>Browser support: Firefox 4+, Safari 5+, IE9+, Chrome, and Opera.<\/li>\n<li><span class=\"phpmind_text_heading_green\">Background clip: <\/span>The background-clip property specifies whether the backgrounds of an element extends into the border or not.\n<pre lang=\"php\">            .div{\r\n                 background:#9CC;\r\n\t\tbackground-clip: content-box;\/*padding-box, border-box or content-box as per need*\/\r\n\t\tbackground-repeat: no-repeat;\r\n\t\twidth:\t100px;\r\n\t\theight:100px;\r\n\t\tpadding:20px;\r\n\t\tborder:10px dotted #39C;\r\n\t\tfloat:left;\r\n         \t}<\/pre>\n<p>&nbsp;<\/p>\n<div class=\"phpmind_background_clip_content\">\n<p>content box<\/p>\n<\/div>\n<div class=\"phpmind_background_clip_padding\">\n<p>padding box<\/p>\n<\/div>\n<div class=\"phpmind_background_clip_border\">\n<p>border box<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>Browser support: Firefox, IE9+, Chrome, Opera and Safari.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>CSS3 introduces two new background properties- background-size background-origin background-size: This property allows web designers to play with background images. Images can be squashed or stretched easily with the help of this property or in other words it is used to resize the background images. Earlier background images were used to appear on the browser in [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[46],"tags":[],"class_list":["post-1282","post","type-post","status-publish","format-standard","hentry","category-css3"],"_links":{"self":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/comments?post=1282"}],"version-history":[{"count":13,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1282\/revisions"}],"predecessor-version":[{"id":1336,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1282\/revisions\/1336"}],"wp:attachment":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/media?parent=1282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/categories?post=1282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/tags?post=1282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}