{"id":141,"date":"2024-01-31T14:03:46","date_gmt":"2024-01-31T21:03:46","guid":{"rendered":"https:\/\/comm.engineering.asu.edu\/pitchfork\/?post_type=pitchfork-docs&#038;p=141"},"modified":"2024-01-31T14:21:03","modified_gmt":"2024-01-31T21:21:03","slug":"background-section","status":"publish","type":"pitchfork-docs","link":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/background-section\/","title":{"rendered":"Background Section"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"insert-block\">Insert the block<\/h2>\n\n\n\n<p>You can find this block within the Pitchfork Blocks section of the block inserter or by typing <code>\/background<\/code> into the block editor.<\/p>\n\n\n\n<p>The block is inserted onto the page along with a <code>core\/group<\/code> block as the starting point for inserting content within the section. <\/p>\n\n\n<div class=\"wp-block-alert alert is-style-alert-info\"><div class=\"alert-icon\"><span class=\"fas fa-check-circle\"><\/span><\/div><div class=\"alert-content\"><div class=\"acf-innerblocks-container\">\n\n<p>The group block that is included by default does not have to be used when creating your content section. You may safely delete it or convert it to another layout block like the <code>core\/row<\/code> or <code>core\/columns<\/code> block instead. <\/p>\n\n<\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"spacing\">Alignment and Spacing<\/h2>\n\n\n\n<p class=\"is-style-lead\">You can alter the margin settings of the block within the styles pane of the block settings panel.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The background section block uses the WordPress default block margins to a define a fairly small margin above and below the block when first deployed.<\/li>\n\n\n\n<li>Please keep in mind that sections within a page normally need to maintain a margin of 96px (UDS Size 6) between the text and the background image or color.<\/li>\n\n\n\n<li>Additionally, sections need to maintain another 96px (UDS Size 6) break between two sections on the same page.<\/li>\n\n\n\n<li>See the <a href=\"https:\/\/xd.adobe.com\/view\/56f6cb78-9af5-4b12-b4ce-ef319f71113f-03a5\/screen\/1c145204-4876-456f-891f-5fe0ff1ddb8a\/\">Spacing and Layout illustrations<\/a> within the Unity Design Kit XD document for more details.<\/li>\n<\/ul>\n\n\n\n<p class=\"is-style-lead\">The block has two alignment settings: align none and align full.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <strong>align none<\/strong> setting will make the background section conform to the normal width of the page (1200px). <\/li>\n\n\n\n<li>The <strong>align full<\/strong> setting will extend the block to the edge of the screen (1920px). <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"settings\">Block settings<\/h2>\n\n\n\n<p>You may choose one of three options for your desired background color or image.<\/p>\n\n\n\n<p class=\"is-style-lead\">No Background Pattern<\/p>\n\n\n\n<p>If you need to create a solid color background section for your content layout, select the <strong>No background pattern<\/strong> option and apply a background color directly from the styles pane in the right sidebar. The approved choices for background colors within the Unity Design system are available in the color picker.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-3-1024x502.png\" alt=\"\" class=\"wp-image-145\" style=\"width:400px\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-3-1024x502.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-3-300x147.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-3-768x377.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-3.png 1032w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"is-style-lead\">UDS Background Pattern<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>All approved patterns from the Unity Design Kit are included as options within this block.<\/li>\n\n\n\n<li>Select your choice from the dropdown to see the background pattern change.<\/li>\n\n\n\n<li>You can also view samples of the entire <a href=\"https:\/\/unity.web.asu.edu\/@asu\/unity-bootstrap-theme\/index.html?path=\/story\/design-backgrounds--approved-background-patterns\">list of approved background patterns<\/a> in the Unity Storybook component explorer.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"494\" height=\"876\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-1.png\" alt=\"\" class=\"wp-image-143\" style=\"width:300px\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-1.png 494w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-1-169x300.png 169w\" sizes=\"auto, (max-width: 494px) 100vw, 494px\" \/><\/figure>\n\n\n\n<p class=\"is-style-lead\">Upload a background pattern<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <strong>Upload a background pattern<\/strong> radio button exposes a separate panel with a field for uploading an image to be used as a background for the section.<\/li>\n\n\n\n<li>The <strong>Background Image Settings<\/strong> panel provides additional options for manipulating the position, size and repeat settings of the background image. The settings applied to the block are the CSS rules for <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/background-repeat\">background-repeat<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/background-position\">background-position<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/background-size\">background-size<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/background-color\">background-color<\/a>. <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"1024\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-4-380x1024.png\" alt=\"\" class=\"wp-image-146\" style=\"width:300px\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-4-380x1024.png 380w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-4-111x300.png 111w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-4.png 512w\" sizes=\"auto, (max-width: 380px) 100vw, 380px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"accessibility\">Accessibility<\/h2>\n\n\n\n<p>When using one of the included background patterns or an uploaded image of your own, please make sure that you are creating enough contrast between the background image and any included text that you want to appear in the foreground. See <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum\">WCAG 1.4.3<\/a> for additional details.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Very often, the background pattern will provide too much visual interference with text inserted directly on the foreground. This makes it harder for site visitors to read the text. <\/li>\n\n\n\n<li>Instead, consider applying a solid background color and some additional margin or padding within a layout block in the foreground to create a visual break between the text and the background pattern.<\/li>\n\n\n\n<li>Applying a unity highlight color to a heading is also a good way to maintain enough contrast between text and the background image.<\/li>\n\n\n\n<li>Using a <code>core\/group<\/code> or <code>core\/columns<\/code> block as a container for your overlay text also provides additional opportunities to create the visual break needed between text and the image.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-style-uds-figure\"><img loading=\"lazy\" decoding=\"async\" width=\"2260\" height=\"830\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image.png\" alt=\"A before and after screenshot illustrating the effects of proper background color and margins for accessible text over a background image.\" class=\"wp-image-142\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image.png 2260w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-300x110.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-1024x376.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-768x282.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-1536x564.png 1536w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-2048x752.png 2048w\" sizes=\"auto, (max-width: 2260px) 100vw, 2260px\" \/><figcaption class=\"wp-element-caption\">The text in the left column of the following layout does not allow enough contract between the pattern and the text to meet accessibility guidelines.<br>The text in the right column shows the effect of adding proper margin\/padding around a text section as well as other techniques that result in a more accessible message.<\/figcaption><\/figure>\n\n\n<div class=\"wp-block-alert alert is-style-alert-info\"><div class=\"alert-icon\"><span class=\"fas fa-check-circle\"><\/span><\/div><div class=\"alert-content\"><div class=\"acf-innerblocks-container\">\n\n<p class=\"is-style-lead\">Want to know more about accessible text and background images?<\/p>\n\n\n\n<p>The excellent article <a href=\"https:\/\/www.smashingmagazine.com\/2023\/08\/designing-accessible-text-over-images-part1\/\">Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1)<\/a> from Smashing Magazine covers this topic in much greater depth.<\/p>\n\n<\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p class=\"mb-2\">The UDS Background section block allows for the creation of a content section that contains either a background color, a background pattern from the Unity design system or an uploaded background image. <\/p>\n","protected":false},"parent":0,"menu_order":0,"template":"","pitchfork-docs-category":[9],"class_list":["post-141","pitchfork-docs","type-pitchfork-docs","status-publish","hentry","pitchfork-docs-category-pitchfork-blocks"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Background Section - Pitchfork Theme for WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/background-section\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Background Section - Pitchfork Theme for WordPress\" \/>\n<meta property=\"og:description\" content=\"The UDS Background section block allows for the creation of a content section that contains either a background color, a background pattern from the Unity design system or an uploaded background image.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/background-section\/\" \/>\n<meta property=\"og:site_name\" content=\"Pitchfork Theme for WordPress\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-31T21:21:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1032\" \/>\n\t<meta property=\"og:image:height\" content=\"506\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/background-section\\\/\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/background-section\\\/\",\"name\":\"Background Section - Pitchfork Theme for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/background-section\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/background-section\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2024\\\/01\\\/image-3-1024x502.png\",\"datePublished\":\"2024-01-31T21:03:46+00:00\",\"dateModified\":\"2024-01-31T21:21:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/background-section\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/background-section\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/background-section\\\/#primaryimage\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2024\\\/01\\\/image-3.png\",\"contentUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2024\\\/01\\\/image-3.png\",\"width\":1032,\"height\":506},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/background-section\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documents\",\"item\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Background Section\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\",\"name\":\"Pitchfork Theme for WordPress\",\"description\":\"an ASU Engineering theme for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Background Section - Pitchfork Theme for WordPress","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:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/background-section\/","og_locale":"en_US","og_type":"article","og_title":"Background Section - Pitchfork Theme for WordPress","og_description":"The UDS Background section block allows for the creation of a content section that contains either a background color, a background pattern from the Unity design system or an uploaded background image.","og_url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/background-section\/","og_site_name":"Pitchfork Theme for WordPress","article_modified_time":"2024-01-31T21:21:03+00:00","og_image":[{"width":1032,"height":506,"url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-3.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/background-section\/","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/background-section\/","name":"Background Section - Pitchfork Theme for WordPress","isPartOf":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website"},"primaryImageOfPage":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/background-section\/#primaryimage"},"image":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/background-section\/#primaryimage"},"thumbnailUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-3-1024x502.png","datePublished":"2024-01-31T21:03:46+00:00","dateModified":"2024-01-31T21:21:03+00:00","breadcrumb":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/background-section\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/background-section\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/background-section\/#primaryimage","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-3.png","contentUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/01\/image-3.png","width":1032,"height":506},{"@type":"BreadcrumbList","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/background-section\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/comm.engineering.asu.edu\/pitchfork\/"},{"@type":"ListItem","position":2,"name":"Documents","item":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/"},{"@type":"ListItem","position":3,"name":"Background Section"}]},{"@type":"WebSite","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/","name":"Pitchfork Theme for WordPress","description":"an ASU Engineering theme for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/comm.engineering.asu.edu\/pitchfork\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs\/141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs"}],"about":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/types\/pitchfork-docs"}],"wp:attachment":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/media?parent=141"}],"wp:term":[{"taxonomy":"pitchfork-docs-category","embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs-category?post=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}