{"id":196155,"date":"2015-02-17T15:03:25","date_gmt":"2015-02-17T22:03:25","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=196155"},"modified":"2021-05-20T10:31:46","modified_gmt":"2021-05-20T17:31:46","slug":"background-repeat","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-repeat\/","title":{"rendered":"background-repeat"},"content":{"rendered":"\n<p>If a <code>background-image<\/code> property is specified, the <code>background-repeat<\/code> property in CSS defines if (and how) it will repeat. Here&#8217;s an example:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">html {\n  background-image: url(logo.png);\n  background-repeat: repeat-x; \n}<\/code><\/pre>\n\n\n\n<p>These are the possible values for this property (besides the usual stuff like <code>inherit<\/code>):<\/p>\n\n\n\n<ul><li><code>repeat<\/code>: tile the image in both directions. This is the default value.<\/li><li><code>repeat-x<\/code>: tile the image horizontally<\/li><li><code>repeat-y<\/code>: tile the image vertically<\/li><li><code>no-repeat<\/code>: don&#8217;t tile, just show the image once<\/li><li><code>space<\/code>: tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit, space them out evently images always touching the edges.<\/li><li><code>round<\/code>: tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit with leftover space, squish them or stretch them to fill the space. If it&#8217;s less than half one image width left, stretch, if it&#8217;s more, stretch.<\/li><\/ul>\n\n\n\n<p>There is also the two value syntax:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n\/* background-repeat: horizontal vertical *\/\n   background-repeat: repeat space;\n   background-repeat: repeat repeat;\n   background-repeat: round space;\n}<\/code><\/pre>\n\n\n\n<p>Which makes the single-value syntaxes just shorthand for the two-value syntax. For example, <code>round<\/code> is really <code>round round<\/code>.<\/p>\n\n\n\n<p>You can also comma-separate multiple values if you&#8217;re dealing with <a href=\"https:\/\/css-tricks.com\/stacking-order-of-multiple-backgrounds\/\">multiple backgrounds<\/a>.<\/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_EaEBOZ\" src=\"\/\/codepen.io\/anon\/embed\/EaEBOZ?height=450&amp;theme-id=1&amp;slug-hash=EaEBOZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed EaEBOZ\" title=\"CodePen Embed EaEBOZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Interactive demo on how <code>space<\/code> and <code>round<\/code> work, as compared to <code>repeat<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vxgyRj\" src=\"\/\/codepen.io\/anon\/embed\/vxgyRj?height=600&amp;theme-id=1&amp;slug-hash=vxgyRj&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vxgyRj\" title=\"CodePen Embed vxgyRj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Another resizing demo, showing a &#8220;fake&#8221; border:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdyEGPm\" src=\"\/\/codepen.io\/anon\/embed\/mdyEGPm?height=450&amp;theme-id=1&amp;slug-hash=mdyEGPm&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdyEGPm\" title=\"CodePen Embed mdyEGPm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/team\/css-tricks\/pen\/mNBrNG\" rel=\"noopener\">Here&#8217;s another fun demo<\/a> with hamburgers demonstrating <code>background-repeat: round;<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table browser-support-table ticss-21380c71\"><table class=\"has-fixed-layout\"><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\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table browser-support-table ticss-21380c71\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/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\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_background-repeat\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-multiple-backgrounds-support\">Multiple backgrounds support<\/h4>\n\n\n<figure class=\"wp-block-table browser-support-table ticss-21380c71\"><table class=\"has-fixed-layout\"><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\">9+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">3.6+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">11.5+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table browser-support-table ticss-21380c71\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/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\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">90+<\/td><td class=\"has-text-align-center\" data-align=\"center\">62+<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_background-repeat_multiple_backgrounds\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-round-and-space-keyword-support\"><code>round<\/code> and <code>space<\/code> keyword support<\/h4>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=background-repeat-round-space\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">32<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">49<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">10<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">7<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">4.4<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">7.0-7.1<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-196155\">\n\n  <time datetime=\"2018-02-14\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 27, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/css-basics-using-multiple-backgrounds\/\">\n      CSS Basics: Using Multiple Backgrounds    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background-repeat\/\" rel=\"tag\">background-repeat<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-196155\">\n\n  <time datetime=\"2020-03-16\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 16, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/how-to-make-repeating-border-images\/\">\n      How to Make Repeating Border Images    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background-repeat\/\" rel=\"tag\">background-repeat<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-196155\">\n\n  <time datetime=\"2019-07-15\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 16, 2019  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/managing-multiple-backgrounds-with-custom-properties\/\">\n      Managing Multiple Backgrounds with Custom Properties    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background-repeat\/\" rel=\"tag\">background-repeat<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-196155\">\n\n  <time datetime=\"2018-08-08\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 9, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/browser-painting-and-considerations-for-web-performance\/\">\n      Browser painting and considerations for web performance    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background-repeat\/\" rel=\"tag\">background-repeat<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/georgymarchuk\/\" aria-label=\"Author page of Georgy Marchuk\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/22a49d295572b7bb7a628ce28e53ef4d?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/22a49d295572b7bb7a628ce28e53ef4d?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/georgymarchuk\/\">\n      Georgy Marchuk    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-196155\">\n\n  <time datetime=\"2011-08-31\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 20, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background\/\">\n      background    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { background: url(texture.svg) top center \/ 200px 200px no-repeat fixed #f8a100; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background-repeat\/\" rel=\"tag\">background-repeat<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-196155\">\n\n  <time datetime=\"2015-02-17\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jun 6, 2017  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-attachment\/\">\n      background-attachment    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-attachment\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.hero { background-attachment: fixed; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background-repeat\/\" rel=\"tag\">background-repeat<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-196155\">\n\n  <time datetime=\"2015-04-06\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 20, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-blend-mode\/\">\n      background-blend-mode    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-blend-mode\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { background-blend-mode: screen; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background-repeat\/\" rel=\"tag\">background-repeat<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-196155\">\n\n  <time datetime=\"2015-02-17\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 20, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-clip\/\">\n      background-clip    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-clip\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { background-clip: padding-box; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background-repeat\/\" rel=\"tag\">background-repeat<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-196155\">\n\n  <time datetime=\"2015-02-17\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 20, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-color\/\">\n      background-color    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-color\/\" class=\"almanac-example\">\n      <code class=\"language-css\">element{ background-color: #ff7a18; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background-repeat\/\" rel=\"tag\">background-repeat<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-196155\">\n\n  <time datetime=\"2015-02-17\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Sep 28, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-image\/\">\n      background-image    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-image\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { background: url(texture.svg); }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background-repeat\/\" rel=\"tag\">background-repeat<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-196155\">\n\n  <time datetime=\"2015-02-17\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 20, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-origin\/\">\n      background-origin    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-origin\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { background-origin: border-box; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background-repeat\/\" rel=\"tag\">background-repeat<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-196155\">\n\n  <time datetime=\"2015-02-17\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jun 2, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-position\/\">\n      background-position    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-position\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { background-position: 100px 5px; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background-repeat\/\" rel=\"tag\">background-repeat<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-196155\">\n\n  <time datetime=\"2015-02-17\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 20, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-size\/\">\n      background-size    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-size\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { background-size: 300px 100px; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background-repeat\/\" rel=\"tag\">background-repeat<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>If a background-image property is specified, the background-repeat property in CSS defines if (and how) it will repeat. Here&#8217;s an example: These are the possible values for this property (besides the usual stuff like inherit): repeat: tile the image in both directions. This is the default value. repeat-x: tile the image horizontally repeat-y: tile the [&hellip;]<\/p>\n","protected":false},"author":3,"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":[1174],"acf":[],"jetpack-related-posts":[{"id":375434,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-repeat\/","url_meta":{"origin":196155,"position":0},"title":"border-image-repeat","date":"December 6, 2022","format":false,"excerpt":"The CSS border-image-repeat property controls how a border image is repeated to fill the outer edges of an element. It can also control the center of an element\u2019s background when border-image-slice is set to fill. .container { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 70; border-image-repeat: repeat; } CodePen Embed\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":307423,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-repeat\/","url_meta":{"origin":196155,"position":1},"title":"mask-repeat","date":"April 24, 2020","format":false,"excerpt":"In CSS, the mask-repeat property tells a mask if it should repeated or not and in which directions. It's a lot like background-repeat. The default is repeat. This mask does not repeat: CodePen Embed Fallback This mask repeats both ways: CodePen Embed Fallback This mask repeats along the x axis:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196160,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-origin\/","url_meta":{"origin":196155,"position":2},"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":196161,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-clip\/","url_meta":{"origin":196155,"position":3},"title":"background-clip","date":"February 17, 2015","format":false,"excerpt":"background-clip lets you control how far a background image or color extends beyond an element's padding or content. .frame { background-clip: padding-box; } Values border-box is the default value. This allows the background to extend all the way to the outside edge of the element's border.padding-box clips the background at\u2026","rel":"","context":"In \"background-clip\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":374647,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-source\/","url_meta":{"origin":196155,"position":4},"title":"border-image-source","date":"November 4, 2022","format":false,"excerpt":"The border-image-source CSS property creates borders around elements using an image file or CSS gradient as the source. .container { border-width: 2rem; border-style: dotted; border-color: grey; border-image-source: url('path\/to\/image.jpg'); border-image-repeat: repeat; border-image-slice: 100; } CodePen Embed Fallback Notice in this example that border-image-source is one of three border-image-* properties: border-image-source: Specifies\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":343405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask\/","url_meta":{"origin":196155,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196155"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=196155"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196155\/revisions"}],"predecessor-version":[{"id":341080,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196155\/revisions\/341080"}],"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=196155"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=196155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}