\n Chris Coyier <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n","protected":false},"excerpt":{"rendered":"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: That’s an example of the two-value syntax for background size. There […]<\/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":[],"acf":[],"jetpack-related-posts":[{"id":196155,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-repeat\/","url_meta":{"origin":196150,"position":0},"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":21202,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-grow\/","url_meta":{"origin":196150,"position":1},"title":"flex-grow","date":"April 18, 2013","format":false,"excerpt":"The flex-grow property is a sub-property of the Flexible Box Layout module. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take\u2026","rel":"","context":"In \"flex-grow\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21263,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-basis\/","url_meta":{"origin":196150,"position":2},"title":"flex-basis","date":"April 19, 2013","format":false,"excerpt":"The flex-basis property is a sub-property of the Flexible Box Layout module. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. When omitted from the flex shorthand, its specified value is the length zero. .element { flex-basis: 100px; }\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13976,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex\/","url_meta":{"origin":196150,"position":3},"title":"flex","date":"August 31, 2011","format":false,"excerpt":"The flex property is a sub-property of the Flexible Box Layout module. This is the shorthand for flex-grow, flex-shrink and flex-basis. The second and third parameters (flex-shrink and flex-basis) are optional. Syntax flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] .flex-item { \/* this *\/ flex: 1 100px; \/*\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196146,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-position\/","url_meta":{"origin":196150,"position":4},"title":"background-position","date":"February 17, 2015","format":false,"excerpt":"The background-position property in CSS allows you to move a background image (or gradient) around within its container. html { background-position: 100px 5px; } 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\u2026","rel":"","context":"In \"background\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21081,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-content\/","url_meta":{"origin":196150,"position":5},"title":"justify-content","date":"April 17, 2013","format":false,"excerpt":"The justify-content property is a sub-property of the Flexible Box Layout module. It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts\u2026","rel":"","context":"With 22 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196150"}],"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=196150"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196150\/revisions"}],"predecessor-version":[{"id":341089,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196150\/revisions\/341089"}],"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=196150"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=196150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}