{"id":19352,"date":"2020-07-11T11:20:16","date_gmt":"2020-07-11T18:20:16","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19352"},"modified":"2020-12-29T11:28:21","modified_gmt":"2020-12-29T19:28:21","slug":"css-background-position","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-background-position\/","title":{"rendered":"CSS Background Position: What Is It and How Does It Work?"},"content":{"rendered":"\n<p><em>Web developers use the CSS background-position property when they need to adjust the starting position for the background image they are working with. In this article, we\u2019ll take a look at the background-position property and how to adjust it to change the position of your image.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Syntax<\/h2>\n\n\n\n<p>The syntax for the background-position property inside a CSS selector is as follows:&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>background-position: value<\/pre><\/div>\n\n\n\n<p>There are a couple of different ways to declare the value on the background-position:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>There are several keyword pair values that can be used:&nbsp;<ul><li>left top<\/li><li>left center<\/li><li>left bottom<\/li><li>right top<\/li><li>right center<\/li><li>right bottom<\/li><li>center top<\/li><li>center center<\/li><li>center bottom<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>The first word represents the horizontal, or x, axis. The second word represents the vertical, or y, axis. If only one value is declared, the y-value is automatically set to \u2018center\u2019.&nbsp;<br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>x%, y%:<\/li><\/ul>\n\n\n\n<p>Similar to the first option, you can specify up to two values: one for the horizontal position on the x-axis, one for the vertical position on the y-axis. If only one value is given, the y% value is set to 50% to center the image on the y-axis. Left top is 0% 0%, top right is 100% 0%, bottom left is 100% 0% and bottom right is 100% 100%.&nbsp;<br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>xpos, ypos (in px\/rem\/em\/pt):<\/li><\/ul>\n\n\n\n<p>Also similar to the previous two options, but the numbers are given in CSS units instead of percent (although you can mix percent and rem\/em\/px\/pt if you\u2019d like). If no second value is given, the ypos is set to 50%;<br><\/p>\n\n\n\n<p>Here is some examples that shows the different values using the first option:<br><\/p>\n\n\n\n<p>Top Left:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n \n&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;\n  &lt;title&gt;Top Left&lt;\/title&gt;\n  &lt;style&gt;\n    body {\n      background: url(&quot;https:\/\/images.unsplash.com\/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=3334&amp;q=80&quot;);\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-attachment: fixed;\n      background-position: top left;\n      display: flex;\n      flex-flow: row wrap;\n    }\n \n    div {\n      height: 200px;\n      width: 25%;\n      background: transparent;\n      border: 5px double ivory;\n      margin: 20px;\n    }\n \n    #text-block {\n      background: ivory;\n      border: 5px double black;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 2rem;\n \n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n \n&lt;body&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div id=&quot;text-block&quot;&gt;\n    top left\n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;script src=&quot;script.js&quot;&gt;\n \n  &lt;\/script&gt;\n&lt;\/body&gt;\n \n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>Center Right:&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n \n&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;\n  &lt;title&gt;Center Right&lt;\/title&gt;\n  &lt;style&gt;\n    body {\n      background: url(&quot;https:\/\/images.unsplash.com\/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=3334&amp;q=80&quot;);\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-attachment: fixed;\n      background-position: center right;\n      display: flex;\n      flex-flow: row wrap;\n    }\n \n    div {\n      height: 200px;\n      width: 25%;\n      background: transparent;\n      border: 5px double ivory;\n      margin: 20px;\n    }\n \n    #text-block {\n      background: ivory;\n      border: 5px double black;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 2rem;\n \n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n \n&lt;body&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div id=&quot;text-block&quot;&gt;\n    center right\n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;script src=&quot;script.js&quot;&gt;\n \n  &lt;\/script&gt;\n&lt;\/body&gt;\n \n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>Bottom Left:&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n \n&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;\n  &lt;title&gt;Bottom Left&lt;\/title&gt;\n  &lt;style&gt;\n    body {\n      background: url(&quot;https:\/\/images.unsplash.com\/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=3334&amp;q=80&quot;);\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-attachment: fixed;\n      background-position: bottom left;\n      display: flex;\n      flex-flow: row wrap;\n    }\n \n    div {\n      height: 200px;\n      width: 25%;\n      background: transparent;\n      border: 5px double ivory;\n      margin: 20px;\n    }\n \n    #text-block {\n      background: ivory;\n      border: 5px double black;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 2rem;\n \n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n \n&lt;body&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div id=&quot;text-block&quot;&gt;\n    bottom left\n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;div&gt;\n \n  &lt;\/div&gt;\n  &lt;script src=&quot;script.js&quot;&gt;\n \n  &lt;\/script&gt;\n&lt;\/body&gt;\n \n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Hopefully the code editors above give you a sense of how you can use the background-position property in your CSS. Play around with it \u2013 change the background image used here, change up the position \u2013 just to see what can be done!<\/p>\n","protected":false},"excerpt":{"rendered":"Web developers use the CSS background-position property when they need to adjust the starting position for the background image they are working with. In this article, we\u2019ll take a look at the background-position property and how to adjust it to change the position of your image. Syntax The syntax for the background-position property inside a&hellip;","protected":false},"author":77,"featured_media":19353,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-19352","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Background Position: What Is It and How Does It Work? | CK<\/title>\n<meta name=\"description\" content=\"Sometimes as developers, we would like to use a background image on the body of our HTML document. This tutorial covers how to position your background image so you have control over how it shows up on your site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-background-position\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Background Position: What Is It and How Does It Work?\" \/>\n<meta property=\"og:description\" content=\"Sometimes as developers, we would like to use a background image on the body of our HTML document. This tutorial covers how to position your background image so you have control over how it shows up on your site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-background-position\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-11T18:20:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:28:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/lum3n-RBuQ2PK_L8-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-background-position\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-background-position\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"CSS Background Position: What Is It and How Does It Work?\",\"datePublished\":\"2020-07-11T18:20:16+00:00\",\"dateModified\":\"2020-12-29T19:28:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-background-position\\\/\"},\"wordCount\":325,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-background-position\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/lum3n-RBuQ2PK_L8-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-background-position\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-background-position\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-background-position\\\/\",\"name\":\"CSS Background Position: What Is It and How Does It Work? | CK\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-background-position\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-background-position\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/lum3n-RBuQ2PK_L8-unsplash.jpg\",\"datePublished\":\"2020-07-11T18:20:16+00:00\",\"dateModified\":\"2020-12-29T19:28:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Sometimes as developers, we would like to use a background image on the body of our HTML document. This tutorial covers how to position your background image so you have control over how it shows up on your site.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-background-position\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-background-position\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-background-position\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/lum3n-RBuQ2PK_L8-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/lum3n-RBuQ2PK_L8-unsplash.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-background-position\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Background Position: What Is It and How Does It Work?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Background Position: What Is It and How Does It Work? | CK","description":"Sometimes as developers, we would like to use a background image on the body of our HTML document. This tutorial covers how to position your background image so you have control over how it shows up on your site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-background-position\/","og_locale":"en_US","og_type":"article","og_title":"CSS Background Position: What Is It and How Does It Work?","og_description":"Sometimes as developers, we would like to use a background image on the body of our HTML document. This tutorial covers how to position your background image so you have control over how it shows up on your site.","og_url":"https:\/\/careerkarma.com\/blog\/css-background-position\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-11T18:20:16+00:00","article_modified_time":"2020-12-29T19:28:21+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/lum3n-RBuQ2PK_L8-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-background-position\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-background-position\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"CSS Background Position: What Is It and How Does It Work?","datePublished":"2020-07-11T18:20:16+00:00","dateModified":"2020-12-29T19:28:21+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-background-position\/"},"wordCount":325,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-background-position\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/lum3n-RBuQ2PK_L8-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-background-position\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-background-position\/","url":"https:\/\/careerkarma.com\/blog\/css-background-position\/","name":"CSS Background Position: What Is It and How Does It Work? | CK","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-background-position\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-background-position\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/lum3n-RBuQ2PK_L8-unsplash.jpg","datePublished":"2020-07-11T18:20:16+00:00","dateModified":"2020-12-29T19:28:21+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Sometimes as developers, we would like to use a background image on the body of our HTML document. This tutorial covers how to position your background image so you have control over how it shows up on your site.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-background-position\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-background-position\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-background-position\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/lum3n-RBuQ2PK_L8-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/lum3n-RBuQ2PK_L8-unsplash.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-background-position\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Background Position: What Is It and How Does It Work?"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=19352"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19352\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/19353"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=19352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=19352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=19352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}