{"id":13963,"date":"2011-08-31T20:00:46","date_gmt":"2011-09-01T03:00:46","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13963"},"modified":"2021-05-20T09:26:04","modified_gmt":"2021-05-20T16:26:04","slug":"background","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background\/","title":{"rendered":"background"},"content":{"rendered":"\n<p>The <code>background<\/code> property in CSS allows you to control the background of any element (what paints underneath the content in that element). It is a <em>shorthand<\/em> property, which means that it allows you to write what would be multiple CSS properties in one. Like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body {\n  background:\n     url(sweettexture.jpg)    \/* image *\/\n     top center \/ 200px 200px \/* position \/ size *\/\n     no-repeat                \/* repeat *\/\n     fixed                    \/* attachment *\/\n     padding-box              \/* origin *\/\n     content-box              \/* clip *\/\n     red;                     \/* color *\/\n}<\/code><\/pre>\n\n\n\n<p><code>background<\/code> is made up of eight other properties:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-image\/\"><code>background-image<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-position\/\"><code>background-position<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-size\/\"><code>background-size<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-repeat\/\"><code>background-repeat<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-attachment\/\"><code>background-attachment<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-origin\/\"><code>background-origin<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-clip\/\"><code>background-clip<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-color\/\"><code>background-color<\/code><\/a><\/li><\/ul>\n\n\n\n<p>You can use any combination of these properties that you like, in almost any order (although the order recommended in the spec is above). There is a gotcha though: anything you don&#8217;t specify in the <code>background<\/code> property is automatically set to its default. So if you do something like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body {\n  background-color: red;\n  background: url(sweettexture.jpg);\n}<\/code><\/pre>\n\n\n\n<p>The background will be transparent, instead of red. The fix is easy though: just define <code>background-color<\/code> after <code>background<\/code>, or just use the shorthand (e.g. <code>background: url(...) red;<\/code>)<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"multiple-backgrounds\">Multiple backgrounds<\/h3>\n\n\n<p>CSS3 added support for multiple backgrounds, which layer over the top of each other. Any property related to backgrounds can take a comma separated list, like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body {\n  background: url(sweettexture.jpg), url(texture2.jpg) black;\n  background-repeat: repeat-x, no-repeat;\n}<\/code><\/pre>\n\n\n\n<p>Each value in the comma separated list corresponds to a layer: the first value is the top layer, the second value is the second layer, and the background color is always the last layer.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_emBzRd\" src=\"\/\/codepen.io\/anon\/embed\/emBzRd?height=450&amp;theme-id=1&amp;slug-hash=emBzRd&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed emBzRd\" title=\"CodePen Embed emBzRd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<p>Support varies among the different specific properties, and each corresponding article in the Almanac has unique browser support notes. Basic single-color backgrounds and single images work everywhere though, and anything that isn&#8217;t supported just falls back to the next best thing, whether that&#8217;s an image or a color.<\/p>\n\n\n\n<figure class=\"wp-block-table browser-support-table ticss-4d4f6e88\"><table><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">Yes<\/td><td class=\"has-text-align-center\" data-align=\"center\">Yes<\/td><td class=\"has-text-align-center\" data-align=\"center\">Yes<\/td><td class=\"has-text-align-center\" data-align=\"center\">Yes<\/td><td class=\"has-text-align-center\" data-align=\"center\">Yes<\/td><td class=\"has-text-align-center\" data-align=\"center\">Yes<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-7295c6d0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome Android<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox Android<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">Yes<\/td><td class=\"has-text-align-center\" data-align=\"center\">Yes<\/td><td class=\"has-text-align-center\" data-align=\"center\">Yes<\/td><td class=\"has-text-align-center\" data-align=\"center\">Yes<\/td><td class=\"has-text-align-center\" data-align=\"center\">Yes<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The background property in CSS allows you to control the background of any element (what paints underneath the content in that element). It is a shorthand property, which means that it allows you to write what would be multiple CSS properties in one. Like this: background is made up of eight other properties: background-image background-position [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13913,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1083],"acf":[],"jetpack-related-posts":[{"id":343405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask\/","url_meta":{"origin":13963,"position":0},"title":"mask","date":"July 2, 2021","format":false,"excerpt":"The mask property is a shorthand to specify all mask-* properties. mask can hide part of the element is applied to and It accepts one or more comma-separated values, where each value corresponds to a mask layer. .element { mask: url(mask.png) right bottom \/ 100px repeat-y; } mask is included\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/drama-masks.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":323048,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-position\/","url_meta":{"origin":13963,"position":1},"title":"mask-position","date":"October 12, 2020","format":false,"excerpt":"In CSS, the mask-position property specifies the initial position of a mask layer image relative to the mask position area. It works like the background-position property. .element { \u00a0 mask-image: url(\"star.svg\"); \u00a0 mask-position: 20px center; } Masking allows you to display selected parts of an element while hiding the rest.\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196155,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-repeat\/","url_meta":{"origin":13963,"position":2},"title":"background-repeat","date":"February 17, 2015","format":false,"excerpt":"If a background-image property is specified, the background-repeat property in CSS defines if (and how) it will repeat. Here's an example: html { background-image: url(logo.png); background-repeat: repeat-x; } These are the possible values for this property (besides the usual stuff like inherit): repeat: tile the image in both directions. This\u2026","rel":"","context":"In \"background-repeat\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196160,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-origin\/","url_meta":{"origin":13963,"position":3},"title":"background-origin","date":"February 17, 2015","format":false,"excerpt":"The background-origin property defines where to paint the background: across the whole element, inside the border, or inside the padding. There are four values: border-box, padding-box, content-box and inherit. Here\u2019s a demo: CodePen Embed Fallback background-origin is similar to background-clip, except it resizes the background rather than clipping it. The\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":362360,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-columns\/","url_meta":{"origin":13963,"position":4},"title":"grid-template-columns","date":"April 25, 2022","format":false,"excerpt":"The grid-template-columns CSS property is part of the CSS Grid Layout specification, defining the columns of a grid container by specifying the size of the grid tracks and its line names. .sidebar-layout { display: grid; grid-template-columns: 300px 1fr; } It\u2019s worth noting the difference between grid lines and grid tracks\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":321696,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-size\/","url_meta":{"origin":13963,"position":5},"title":"mask-size","date":"September 23, 2020","format":false,"excerpt":"In CSS, the mask-size property specifies the size of a mask layer image. In many ways, it works very much like the background-size property. .element { \u00a0 mask-image: url(star.svg); \u00a0 mask-size: 200px 100px; } Masking allows you to display selected parts of an element while hiding the rest. The size\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13963"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13963"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13963\/revisions"}],"predecessor-version":[{"id":341051,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13963\/revisions\/341051"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13913"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13963"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}