{"id":196146,"date":"2015-02-17T14:32:02","date_gmt":"2015-02-17T21:32:02","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=196146"},"modified":"2021-06-02T12:19:50","modified_gmt":"2021-06-02T19:19:50","slug":"background-position","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-position\/","title":{"rendered":"background-position"},"content":{"rendered":"\n<p>The <code>background-position<\/code> property in CSS allows you to move a background image (or gradient) around within its container.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">html {\n  background-position: 100px 5px; \n}<\/code><\/pre>\n\n\n\n<p>It has three different types of values:<\/p>\n\n\n\n<ul><li>Length values (e.g. <code>100px 5px<\/code>)<\/li><li>Percentages (e.g. <code>100% 5%<\/code>)<\/li><li>Keywords (e.g. <code>top right<\/code>)<\/li><\/ul>\n\n\n\n<p>The default values are <code>0 0<\/code>. This places your background image at the top-left of the container.<\/p>\n\n\n\n<p>Length values are pretty simple: the first value is the horizontal position, second value is the vertical position. So <code>100px 5px<\/code> will move the image 100px to the right and five pixels down. You can set length values in <code>px<\/code>, <code>em<\/code>, or any of the other <a href=\"http:\/\/www.w3.org\/Style\/Examples\/007\/units.en.html\" rel=\"noopener\">CSS length values.<\/a><\/p>\n\n\n\n<p>Percentages work a little differently. Get your math hats out: moving a background image by X% means it will align the X% point in the image to the X% point in the container. For example, <code>50%<\/code> means it will align the middle of the image with the middle of the container. <code>100%<\/code> means it will align the last pixel of the image with the last pixel of the container, and so on.<\/p>\n\n\n\n<p>Keywords are just shortcuts for percentages. It&#8217;s easier to remember and write <code>top right<\/code> than <code>0 100%<\/code>, and that&#8217;s why keywords are a thing. Here is a list of all five keywords and their equivalent values:<\/p>\n\n\n\n<ul><li><code>top<\/code>: 0% vertically<\/li><li><code>right<\/code>: 100% horizontally<\/li><li><code>bottom<\/code>: 100% vertically<\/li><li><code>left<\/code>: 0% horizontally<\/li><li><code>center<\/code>: 50% horizontally if horizontal isn&#8217;t already defined. If it is then this is applied vertically.<\/li><\/ul>\n\n\n\n<p>It&#8217;s interesting to note that it doesn&#8217;t matter what order you use for the keywords: <code>top center<\/code> is the same as <code>center top<\/code>. You can only do this if you&#8217;re <em>exclusively<\/em> using keywords, though. <code>center 10%<\/code> is not the same as <code>10% center<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>This demo shows examples of <code>background-position<\/code> set with length units, percentages, and keywords.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ogqrGw\" src=\"\/\/codepen.io\/anon\/embed\/ogqrGw?height=750&amp;theme-id=1&amp;slug-hash=ogqrGw&amp;default-tab=result\" height=\"750\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ogqrGw\" title=\"CodePen Embed ogqrGw\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"declaring-values\">Declaring values<\/h3>\n\n\n<p>You can give <code>background-position<\/code> up to four values in modern browsers:<\/p>\n\n\n\n<ul><li>If you declare <strong>one value<\/strong>, that value is the horizontal offset. The browser sets the vertical offset to <code>center<\/code>.<\/li><li>When you declare <strong>two values<\/strong>, the first value is the horizontal offset and the second value is the vertical offset.<\/li><\/ul>\n\n\n\n<p>Things get a little trickier when you start using three or four values, but you also get more control over your background placement. A three- or four-value syntax alternates between keywords and length or percentage units. You can use any of the keyword values <em>except<\/em> <code>center<\/code> in a three- or four-value <code>background-position<\/code> declaration.<\/p>\n\n\n\n<p>When you specify <strong>three values<\/strong>, the browser interpets the &#8220;missing&#8221; fourth value as 0. Here&#8217;s an example of a three-value <code>background-position<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.three-values {\n  background-position: right 45px bottom;\n}<\/code><\/pre>\n\n\n\n<p>This positions the background image <code>45px<\/code> from the right and <code>0px<\/code> from the bottom of the container.<\/p>\n\n\n\n<p>Here&#8217;s an example of a <strong>four-value<\/strong> <code>background-position<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.four-values {\n  background-position: right 45px bottom 20px;\n}<\/code><\/pre>\n\n\n\n<p>This puts the background image <code>45px<\/code> from the right and <code>20px<\/code> from the bottom of the container.<\/p>\n\n\n\n<p>Notice the order of the values in the examples above: keywords followed by length units. A three- or four-value <code>background-position<\/code> must follow that format, with a keyword preceding a length or percentage unit.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>This demo includes examples of one value, two value, three value, and four value <code>background-position<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yyKdPB\" src=\"\/\/codepen.io\/anon\/embed\/yyKdPB?height=550&amp;theme-id=1&amp;slug-hash=yyKdPB&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yyKdPB\" title=\"CodePen Embed yyKdPB\" 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>The basic values are supported everywhere. The four-value syntax has this support:<\/p>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-background-offsets\" 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\">25<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">13<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">9<\/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\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/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\n<p>That&#8217;s the same level of support as the <code>background-position-x<\/code> and <code>background-position-y<\/code> properties.<\/p>\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-196146\">\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\/\" rel=\"tag\">background<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/background-position\/\" rel=\"tag\">background-position<\/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-196146\">\n\n  <time datetime=\"2014-12-23\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 30, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/positioning-offset-background-images\/\">\n      Positioning Offset Background Images    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background\/\" rel=\"tag\">background<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/background-position\/\" rel=\"tag\">background-position<\/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-196146\">\n\n  <time datetime=\"2015-03-04\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 4, 2015  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/i-like-how-percentage-background-position-works\/\">\n      I like how percentage background-position works    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background\/\" rel=\"tag\">background<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/background-position\/\" rel=\"tag\">background-position<\/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-196146\">\n\n  <time datetime=\"2017-04-17\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 30, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/focusing-background-image-precise-location-percentages\/\">\n      Focusing a `background-image` on a Precise Location with Percentages    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background\/\" rel=\"tag\">background<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/background-position\/\" rel=\"tag\">background-position<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/jaysitter\/\" aria-label=\"Author page of Jay Sitter\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/ac754c6682557837c4bfb86b5597c92b?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/ac754c6682557837c4bfb86b5597c92b?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\/jaysitter\/\">\n      Jay Sitter    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-196146\">\n\n  <time datetime=\"2018-10-04\" title=\"Originally published Feb 17, 2015\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 4, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/moving-backgrounds-with-mouse-position\/\">\n      Moving Backgrounds With Mouse Position    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/background\/\" rel=\"tag\">background<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/background-position\/\" rel=\"tag\">background-position<\/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>The background-position property in CSS allows you to move a background image (or gradient) around within its container. It has three different types of values: Length values (e.g. 100px 5px) Percentages (e.g. 100% 5%) Keywords (e.g. top right) The default values are 0 0. This places your background image at the top-left of the container. [&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":[1083,1221],"acf":[],"jetpack-related-posts":[{"id":323048,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-position\/","url_meta":{"origin":196146,"position":0},"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":196150,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-size\/","url_meta":{"origin":196146,"position":1},"title":"background-size","date":"February 17, 2015","format":false,"excerpt":"The background-size property in CSS is one of the most useful \u2014 and most complex \u2014 of the background properties. There are many variations and different syntaxes you can use for this property, all of which have different use cases. Here\u2019s a basic example: html { background: url(greatimage.jpg); background-size: 300px\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":194885,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-position\/","url_meta":{"origin":196146,"position":2},"title":"object-position","date":"February 3, 2015","format":false,"excerpt":"The CSS property object-position is used to align any selected replaced element (e.g., an <img>) within the box that contains it. img { object-position: right bottom; } An <img> element will align to bottom-right edge of its parent container with object-position: right bottom;. While it\u2019s probably most common to see\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/object-fit-element-container.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":343405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask\/","url_meta":{"origin":196146,"position":3},"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":7081,"url":"https:\/\/css-tricks.com\/snippets\/css\/multiple-borders\/","url_meta":{"origin":196146,"position":4},"title":"Multiple Borders","date":"August 12, 2010","format":false,"excerpt":"Using pseudo element(s) You can position a pseudo element such that it's either behind the element, and larger, making a border effect with it's own background, or smaller and inside (but make sure the content gets positioned on top). The element needing multiple borders should have its own border and\u2026","rel":"","context":"With 31 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4188,"url":"https:\/\/css-tricks.com\/snippets\/css\/css-box-shadow\/","url_meta":{"origin":196146,"position":5},"title":"CSS Box Shadow","date":"September 21, 2009","format":false,"excerpt":"Used in casting shadows off block-level elements (like divs). .shadow { box-shadow: 3px 3px 5px 6px #ccc; } The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.The vertical\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196146"}],"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=196146"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196146\/revisions"}],"predecessor-version":[{"id":341852,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196146\/revisions\/341852"}],"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=196146"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=196146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}