CodePen Embed - Learn CSS - Using background-attachment: fixed on a background-image

Live

This Pen is owned by web.dev on CodePen. It is a fork of this Pen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":true,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"MWoozvN\",\"auto_save\":true},\"hashid\":\"MWoozvN\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[],\"id\":55047266,\"user_id\":5928893,\"html\":\"<div class=\\\"wrapper\\\">\\n  <h2>Using <code>background-attachment: fixed</code> on a background image</h2>\\n  <figure id=\\\"demoCallout\\\" class=\\\"callout\\\">\\n    <p><code>background-attachment: fixed</code> is applied to the CSS box with a background image. Notice how the background image becomes fixed relative to the viewport as the CSS box it is a background layer to scrolls off the page.</p>\\n  </figure>\\n  <div id=\\\"demoAndCodeSnippetBox\\\">\\n\\n    <div id=\\\"demoBox\\\"></div>\\n    <div id=\\\"textContent\\\">\\n\\n      <p>\\n        Croissant cotton candy apple pie cheesecake cake. Chocolate cake carrot cake cupcake tart jelly-o croissant tiramisu biscuit pie. Tart danish danish danish tart icing chocolate chupa chups. Chupa chups caramels gummi bears jujubes biscuit cheesecake cheesecake. Chocolate marzipan danish shortbread fruitcake jelly beans macaroon tootsie roll candy. Candy canes jelly-o topping jujubes lollipop gummies apple pie lollipop fruitcake.</p>\\n\\n      <p>\\n        Shortbread marshmallow jelly-o fruitcake lemon drops sweet roll pudding. Pastry muffin marzipan cake toffee candy canes tiramisu. Liquorice bear claw wafer topping tootsie roll chocolate bar bear claw. Danish chocolate jelly jelly-o powder. Chupa chups bonbon powder tart powder oat cake wafer. Powder sesame snaps toffee chocolate dessert marshmallow cookie marshmallow chupa chups. Croissant cake gummi bears pastry gummi bears gummi bears lemon drops cheesecake cake. Liquorice pie pudding chocolate dragée wafer cupcake. Liquorice wafer brownie topping lollipop jelly. Candy canes carrot cake chocolate bar gummi bears lemon drops marshmallow soufflé fruitcake.</p>\\n\\n      <p>\\n        Bear claw bear claw candy tootsie roll topping marzipan biscuit. Chocolate cake ice cream macaroon powder chocolate cotton candy cookie lollipop. Ice cream chocolate cake sugar plum brownie marshmallow wafer icing. Jelly donut lollipop macaroon sweet sweet apple pie toffee sesame snaps. Tootsie roll toffee chupa chups dragée tootsie roll cake. Fruitcake lemon drops pie gingerbread chocolate bar cheesecake. Chocolate cake marzipan gummies pie macaroon sugar plum carrot cake marshmallow sesame snaps. Fruitcake jelly beans lemon drops bonbon muffin toffee fruitcake carrot cake. Sesame snaps shortbread jujubes lollipop caramels tootsie roll. </p>\\n\\n      <p>\\n        Pastry jelly-o sweet jelly-o jelly muffin. Gingerbread powder chocolate chocolate fruitcake cake pie danish. Fruitcake sweet lemon drops icing oat cake muffin shortbread cupcake. Bonbon gingerbread marshmallow cake icing ice cream. Shortbread topping candy canes soufflé tart dessert cupcake sugar plum pastry. Tootsie roll danish liquorice macaroon candy canes sesame snaps. Lollipop lollipop tootsie roll marshmallow candy.</p>\\n\\n      <p>\\n        Sesame snaps shortbread muffin tiramisu carrot cake wafer liquorice. Macaroon toffee marzipan toffee marshmallow tootsie roll pudding chupa chups bear claw. Dessert cupcake chocolate cookie soufflé. Sweet sweet roll oat cake candy brownie ice cream donut. Sesame snaps icing marshmallow lollipop dragée. Cotton candy gummies gummi bears topping sweet marzipan croissant gummi bears sesame snaps. Candy canes liquorice wafer donut soufflé chupa chups. </p>\\n\\n      <p>\\n        Topping sugar plum fruitcake gingerbread chocolate marshmallow bear claw soufflé shortbread. Tart danish cupcake tiramisu dessert bonbon. Croissant jelly beans toffee cotton candy bear claw donut croissant. Cupcake sweet biscuit icing cookie. Soufflé soufflé candy canes cotton candy oat cake lemon drops icing. Soufflé bonbon danish gingerbread sugar plum. Lemon drops pudding soufflé topping tootsie roll halvah dessert jelly. Soufflé cookie sweet cheesecake chupa chups fruitcake soufflé. </p>\\n\\n      <p>\\n        Brownie cookie tiramisu lemon drops cotton candy cookie. Jelly-o cotton candy jelly beans jelly beans jujubes caramels toffee. Jelly carrot cake marzipan bonbon candy canes oat cake. Cake candy canes bonbon chupa chups jelly chocolate bar wafer dessert. Gummies bear claw lollipop cupcake marshmallow. Oat cake toffee pastry apple pie topping. Bear claw bonbon marshmallow cupcake apple pie wafer jelly beans tootsie roll soufflé. </p>\\n\\n      <p>\\n        Caramels toffee candy canes soufflé toffee cake. Shortbread tiramisu brownie powder oat cake cheesecake chocolate cake. Croissant icing fruitcake liquorice sweet roll. Caramels danish pastry topping topping marshmallow danish bonbon cookie. Candy gummi bears jelly beans wafer chocolate cake tiramisu sweet gingerbread. Sweet roll sesame snaps cookie candy gummies lemon drops. Topping jelly candy canes pastry halvah pastry. Soufflé marshmallow tiramisu lollipop pastry. </p>\\n\\n      <p>\\n        Icing tart chocolate bar jujubes candy jujubes. Chocolate bar ice cream candy canes pastry sugar plum cotton candy ice cream. Pudding chupa chups cookie candy wafer sesame snaps dragée sweet pudding. Macaroon lollipop pie bonbon chocolate jelly icing muffin. Tart cake bear claw tootsie roll candy toffee. Biscuit liquorice sweet tart jelly beans icing. Macaroon lemon drops powder lemon drops halvah. Jelly beans donut sugar plum chocolate candy topping marshmallow sesame snaps chupa chups. </p>\\n\\n      <p>\\n        Pudding jelly-o pudding cake muffin dragée lemon drops. Jelly beans tootsie roll bear claw cookie apple pie marshmallow cookie bonbon. Powder danish biscuit sweet apple pie. Toffee oat cake tiramisu gummi bears chocolate cake croissant chocolate bar. Fruitcake cotton candy ice cream cake icing. Cake biscuit jelly sesame snaps jelly-o chocolate bar macaroon. Macaroon marshmallow gingerbread marshmallow chocolate cake jujubes. Wafer oat cake cheesecake cotton candy powder gingerbread cake sweet shortbread. Sugar plum toffee croissant liquorice gummies cookie donut jujubes ice cream. </p>\\n\\n      <p>\\n        Halvah gummies sesame snaps marzipan jelly beans cotton candy lollipop halvah bonbon. Marzipan biscuit tiramisu powder carrot cake tootsie roll. Topping cookie bonbon donut gingerbread cupcake cake cheesecake. Macaroon jujubes ice cream marzipan cookie bear claw. Bonbon macaroon liquorice cotton candy carrot cake. Caramels chocolate cake marshmallow halvah marshmallow. </p>\\n\\n      <p>\\n        Sugar plum icing chocolate ice cream shortbread jujubes sesame snaps chupa chups cotton candy. Cake jelly-o toffee tart soufflé pudding chupa chups bonbon. Cheesecake croissant dessert chocolate cake fruitcake caramels. Gingerbread cookie sesame snaps jujubes bear claw lemon drops candy canes dessert. Jelly chupa chups tootsie roll apple pie shortbread. Sesame snaps jelly jujubes jelly brownie powder gummies chocolate cake. Tiramisu powder toffee pastry jelly cheesecake chocolate cake. Gingerbread lemon drops topping chocolate jujubes muffin topping soufflé. </p>\\n    </div>\\n  </div>\\n</div>\",\"css\":\"/* PULL IN FONTS AND RESET */\\n@import url(\\\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap\\\");\\n@import url(\\\"https://unpkg.com/modern-css-reset/dist/reset.min.css\\\");\\n\\n/* SETTINGS */\\n:root {\\n  --color-primary: #3740ff;\\n  --color-primary-dark: #272eb5;\\n  --color-primary-light: #3740ff;\\n  --color-primary-x-light: #e8f0fe;\\n  --color-light: #ffffff;\\n  --color-dark: #202124;\\n  --color-off-white: #f3f4f4;\\n  --color-mid: #5f6368;\\n  --color-mid-dark: #3c4043;\\n  --color-stroke: #dadce0;\\n  --metric-gutter: 1.5rem;\\n  --metric-box-spacing: 1rem;\\n  --metric-radius: 3px;\\n  --generic-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3),\\n    0px 2px 6px 2px rgba(60, 64, 67, 0.15);\\n  --font-mono: SFMono-Regular, Consolas, \\\"Liberation Mono\\\", Menlo, monospace;\\n}\\n\\n/* PROP-CONTROLLED UTIL CLASSES */\\n.color-primary {\\n  color: var(--color-primary);\\n}\\n\\n.color-primary-dark {\\n  color: var(--color-primary-dark);\\n}\\n\\n.color-primary-light {\\n  color: var(--color-primary-light);\\n}\\n\\n.color-primary-x-light {\\n  color: var(--color-primary-x-light);\\n}\\n\\n.color-light {\\n  color: var(--color-light);\\n}\\n\\n.color-dark {\\n  color: var(--color-dark);\\n}\\n\\n.color-off-white {\\n  color: var(--color-off-white);\\n}\\n\\n.color-mid {\\n  color: var(--color-mid);\\n}\\n\\n.color-mid-dark {\\n  color: var(--color-mid-dark);\\n}\\n\\n.bg-primary {\\n  background: var(--color-primary);\\n}\\n\\n.bg-primary-dark {\\n  background: var(--color-primary-dark);\\n}\\n\\n.bg-primary-light {\\n  background: var(--color-primary-light);\\n}\\n\\n.bg-primary-x-light {\\n  background: var(--color-primary-x-light);\\n}\\n\\n.bg-light {\\n  background: var(--color-light);\\n}\\n\\n.bg-dark {\\n  background: var(--color-dark);\\n}\\n\\n.bg-off-white {\\n  background: var(--color-off-white);\\n}\\n\\n.bg-mid {\\n  background: var(--color-mid);\\n}\\n\\n.bg-mid-dark {\\n  background: var(--color-mid-dark);\\n}\\n\\n/* GLOBAL STYLES */\\nbody {\\n  min-height: 100vh;\\n  padding: 2rem 0;\\n  display: flex;\\n  flex-direction: column;\\n  font-family: \\\"Roboto\\\", Arial, Helvetica, sans-serif;\\n  background: var(--color-light);\\n  color: var(--color-dark);\\n  line-height: 1.55;\\n  letter-spacing: 0.03ch;\\n}\\n\\nmain {\\n  flex: auto;\\n}\\n\\na:not([class]) {\\n  color: var(--color-primary);\\n}\\n\\na:hover {\\n  text-decoration: none;\\n}\\n\\n:is(h1, h2, h3) {\\n  font-weight: 500;\\n  line-height: 1.2;\\n  max-width: 50ch;\\n}\\n\\nh1 {\\n  font-size: 2.25rem;\\n}\\n\\nh2 {\\n  font-size: 1.75rem;\\n  color: var(--color-mid-dark);\\n}\\n\\nh3 {\\n  font-size: 1.25rem;\\n}\\n\\n:is(p, li, blockquote, dl) {\\n  max-width: 65ch;\\n}\\n\\nul {\\n  padding: 0 0 0 1.3rem;\\n}\\n\\nli + li {\\n  margin-top: 1rem;\\n}\\n\\n/*\\ncode {\\n  padding: 0.125em 0.25em;\\n  background: var(--color-off-white);\\n  border: 1px solid var(--color-stroke);\\n  font-family: var(--font-mono);\\n  font-size: 0.85em;\\n  hyphens: none;\\n  tab-size: 2;\\n  text-align: left;\\n  word-spacing: normal;\\n  word-break: normal;\\n  word-wrap: normal;\\n  box-decoration-break: clone;\\n  -webkit-box-decoration-break: clone;\\n}\\n*/\\n\\nfigcaption {\\n  margin-top: 0.5em;\\n  font-weight: normal;\\n  text-align: left;\\n}\\n\\nselect {\\n  padding: 0.5rem;\\n  min-width: 12rem;\\n  font: inherit;\\n  border: 1px solid var(--color-stroke);\\n}\\n\\nselect:focus {\\n  border-color: var(--color-primary);\\n}\\n\\nhr {\\n  border: 0;\\n  border-top: 1px solid var(--color-stroke);\\n  margin: 4rem auto !important; /* Gotta be sure this overrides flow rules etc */\\n}\\n\\nlabel::after {\\n  content: \\\"\\\\A\\\";\\n  white-space: pre;\\n}\\n\\n::marker {\\n  color: var(--color-mid);\\n  font-size: 1.5em;\\n}\\n\\n/* GENERIC UTILITIES */\\n\\n/* https://piccalil.li/quick-tip/flow-utility */\\n.flow > * + * {\\n  margin-top: var(--flow-space, 2em);\\n}\\n\\n/* https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility */\\n.wrapper {\\n  width: 90vw;\\n  width: clamp(16rem, 90vw, 70rem);\\n  margin-left: auto;\\n  margin-right: auto;\\n  padding-left: var(--metric-gutter);\\n  padding-right: var(--metric-gutter);\\n  position: relative;\\n}\\n\\n/* ELEMENTS */\\n.box {\\n  padding: var(--metric-box-spacing);\\n  border: 1px solid var(--color-stroke);\\n  box-shadow: var(--generic-shadow);\\n  font-weight: 500;\\n  text-align: center;\\n  max-width: 40rem;\\n}\\n\\n.box:not([class*=\\\"bg-\\\"]) {\\n  background: var(--color-off-white);\\n}\\n\\n.button,\\nbutton {\\n  display: inline-flex;\\n  align-items: center;\\n  justify-items: center;\\n  background: var(--color-primary);\\n  border: 1px solid var(--color-primary);\\n  border-radius: var(--metric-radius);\\n  color: var(--color-light);\\n  cursor: pointer;\\n  font: inherit;\\n  padding: 1rem;\\n  position: relative;\\n  text-decoration: none;\\n  text-transform: uppercase;\\n  letter-spacing: 0.1ch;\\n  transition: background-color 0.2s, box-shadow 0.2s;\\n  overflow: hidden;\\n  position: relative;\\n  white-space: nowrap;\\n  box-shadow: none;\\n}\\n\\n.button:hover,\\nbutton:hover {\\n  box-shadow: var(--generic-shadow);\\n  background: var(--color-primary-light);\\n}\\n\\n.button[data-type=\\\"secondary\\\"],\\nbutton[data-type=\\\"secondary\\\"] {\\n  background: var(--color-light);\\n  color: var(--color-dark);\\n  border-color: var(--color-stroke);\\n}\\n\\n.button[data-type=\\\"secondary\\\"]:hover,\\nbutton[data-type=\\\"secondary\\\"]:hover {\\n  background: var(--color-off-white);\\n}\\n\\n/* CALLOUT */\\n.callout {\\n  padding: var(--metric-box-spacing) var(--metric-box-spacing)\\n    var(--metric-box-spacing) 3rem;\\n  background: var(--color-primary-x-light);\\n  border: 1px solid var(--color-primary-light);\\n  color: var(--color-primary-dark);\\n  position: relative;\\n  max-width: 40rem;\\n}\\n\\n.callout::before {\\n  content: \\\"\\\";\\n  background-image: url('data:image/svg+xml;utf8,<svg fill=\\\"%23272eb5\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 32 32\\\"><path d=\\\"M14 9.5c0-.825.675-1.5 1.5-1.5h1c.825 0 1.5.675 1.5 1.5v1c0 .825-.675 1.5-1.5 1.5h-1c-.825 0-1.5-.675-1.5-1.5v-1zM20 24h-8v-2h2v-6h-2v-2h6v8h2z\\\"/><path d=\\\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm0 29C8.82 29 3 23.18 3 16S8.82 3 16 3s13 5.82 13 13-5.82 13-13 13z\\\"/></svg>');\\n  background-size: cover;\\n  width: 1.25rem;\\n  height: 1.25rem;\\n  display: block;\\n  position: absolute;\\n  top: var(--metric-box-space);\\n  left: 1rem;\\n}\\n\\n.callout p + p {\\n  margin-top: 1em;\\n}\\n\\n.callout a {\\n  color: var(--color-primary-dark);\\n  font-weight: bold;\\n}\\n\\n/* TOGGLE */\\n.toggle {\\n  --metric-toggle-thumb-size: 1rem;\\n  --metric-toggle-thumb-space: 0.25rem;\\n\\n  position: relative;\\n  display: inline-flex;\\n  align-items: center;\\n}\\n\\n.toggle__element {\\n  opacity: 0;\\n  position: absolute;\\n  top: 50%;\\n  transform: translateY(-50%);\\n  right: var(--metric-toggle-thumb-size);\\n  width: 1em;\\n  height: 1em;\\n}\\n\\n.toggle__decor {\\n  display: block;\\n  position: relative;\\n  overflow: hidden;\\n  width: calc(\\n    (var(--metric-toggle-thumb-size) * 2) +\\n      (var(--metric-toggle-thumb-space) * 2)\\n  );\\n  height: calc(\\n    var(--metric-toggle-thumb-size) + (var(--metric-toggle-thumb-space) * 2)\\n  );\\n  background: var(--color-mid);\\n  margin-left: 0.5rem;\\n  border-radius: var(--metric-toggle-thumb-size);\\n  box-sizing: content-box;\\n  border: 1px solid var(--color-light);\\n}\\n\\n.toggle__thumb {\\n  display: grid;\\n  place-items: center;\\n  width: var(--metric-toggle-thumb-size);\\n  height: var(--metric-toggle-thumb-size);\\n  border-radius: var(--metric-toggle-thumb-size);\\n  background: linear-gradient(\\n      229.84deg,\\n      rgba(255, 255, 255, 0) 14.29%,\\n      rgba(48, 48, 48, 0.15) 81.82%\\n    ),\\n    #ffffff;\\n  box-shadow: var(--generic-shadow);\\n  position: absolute;\\n  top: var(--metric-toggle-thumb-space);\\n  left: var(--metric-toggle-thumb-space);\\n  transform: none;\\n  transition: transform 200ms cubic-bezier(1, 0, 0.55, 0.85);\\n  will-change: transform;\\n  z-index: 1;\\n}\\n\\n.toggle__thumb::before {\\n  content: \\\"\\\";\\n  display: none;\\n  width: calc(\\n    var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)\\n  );\\n  height: calc(\\n    var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)\\n  );\\n  border: 1px solid var(--color-primary-light);\\n  border-radius: calc(\\n    var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)\\n  );\\n}\\n\\n.toggle__thumb::before {\\n  content: \\\"\\\";\\n  display: none;\\n  width: calc(\\n    var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)\\n  );\\n  height: calc(\\n    var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)\\n  );\\n  border: 1px solid var(--color-primary);\\n  border-radius: calc(\\n    var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)\\n  );\\n}\\n\\n.toggle__decor:hover .toggle__thumb {\\n  margin-left: 1px;\\n}\\n\\n:checked + .toggle__decor:hover .toggle__thumb {\\n  margin-left: -1px;\\n}\\n\\n:checked + .toggle__decor {\\n  background: var(--color-primary-light);\\n}\\n\\n:checked + .toggle__decor .toggle__thumb {\\n  transform: translateX(var(--metric-toggle-thumb-size)) rotate(270deg);\\n}\\n\\n:focus + .toggle__decor:not(:hover) .toggle__thumb::before {\\n  display: block;\\n}\\n\\n:disabled + .toggle__decor {\\n  filter: grayscale(1) brightness(1.5);\\n  cursor: not-allowed;\\n}\\n\\n/* DIMENSIONS LABEL */\\n.dimension-label {\\n  position: relative;\\n  text-align: center;\\n  font-family: var(--font-mono);\\n  color: var(--color-primary-dark);\\n}\\n\\n.dimension-label::before {\\n  content: \\\"\\\";\\n  width: 134px;\\n  height: 8px;\\n  background-image: url('data:image/svg+xml;utf8,<svg viewBox=\\\"0 0 134 8\\\" fill=\\\"%23DADCE0\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M0 3.897L6.75 0v3.397h120.5V0L134 3.897l-6.75 3.897V4.397H6.75v3.397L0 3.897z\\\"/></svg>');\\n  background-position: center center;\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%, -50%);\\n}\\n\\n.dimension-label > * {\\n  display: inline-block;\\n  padding: 0.25em;\\n  background: var(--color-light);\\n  position: relative;\\n  z-index: 1;\\n}\\n\\n.dimension-label[data-orientation=\\\"vertical\\\"] {\\n  writing-mode: vertical-rl;\\n  text-orientation: mixed;\\n}\\n\\n.dimension-label[data-orientation=\\\"vertical\\\"]::before {\\n  transform: translate(-50%, -50%) rotate(90deg);\\n}\\n\\n/* CLUSTER LAYOUT */\\n.cluster {\\n  display: flex;\\n  flex-wrap: wrap;\\n  justify-content: flex-start;\\n  align-items: center;\\n  margin: calc(var(--metric-gutter) / 2 * -1);\\n}\\n\\n.cluster > * {\\n  margin: calc(var(--metric-gutter) / 2);\\n}\\n\\n/* SIDEBAR LAYOUT */\\n\\n.sidebar {\\n  --sidebar-min-content-width: 50%;\\n\\n  display: flex;\\n  flex-wrap: wrap;\\n  margin: calc(var(--metric-gutter) / 2 * -1);\\n}\\n\\n.sidebar > * {\\n  margin: calc(var(--metric-gutter) / 2);\\n  flex-grow: 1;\\n}\\n\\n.sidebar > :last-child {\\n  flex-basis: 0;\\n  flex-grow: 999;\\n  min-width: calc(var(--sidebar-min-content-width) - var(--metric-gutter));\\n}\\n\\n/* SWITCHER LAYOUT */\\n\\n.switcher {\\n  --switcher-threshold: 40rem;\\n\\n  display: flex;\\n  flex-wrap: wrap;\\n  margin: calc((var(--metric-gutter) / 2) * -1);\\n}\\n\\n.switcher > * {\\n  flex-grow: 1;\\n  flex-basis: calc(\\n    (var(--switcher-threshold) - (100% - var(--metric-gutter))) * 999\\n  );\\n  margin: calc(var(--metric-gutter) / 2);\\n}\\n\\n.switcher > :nth-last-child(n + 5),\\n.switcher > :nth-last-child(n + 5) ~ * {\\n  flex-basis: 100%;\\n}\\n\\n#demoCallout {\\n  margin-top: 1rem;\\n  max-width: 100%;\\n}\\n\\n#demoCallout p {\\n  max-width: 90ch;\\n}\\n\\n/* PRISM */\\n\\n/* END PRISM */\\n\\n/* Demo Unique Styles */\\n\\n*,\\n*:before,\\n*:after {\\n  box-sizing: border-box;\\n}\\n\\n#demoBox {\\n  aspect-ratio: 16/9;\\n  border: 0.5px solid hsla(0deg, 0%, 60%, 0.5);\\n  width: 100%;\\n  border: 1px solid hsla(0deg, 0%, 40%, 0.25);\\n  padding: 1rem;\\n  /* have background-size be within reason within the bounds of box but still allow regular tiling to occur on applicable images */\\n  background-image: url(\\\"https://images.unsplash.com/photo-1529673203658-56306382b724?auto=format&fit=crop&w=1000&q=80&ar=16:9\\\");\\n  background-size: cover;\\n  background-attachment: fixed;\\n}\\n\\n/* TODO: Make one-column by default */\\n#demoAndCodeSnippetBox {\\n  display: grid;\\n  grid-template-columns: 1fr;\\n  grid-gap: 1rem;\\n  margin: 2rem 0;\\n  width: 100%;\\n}\\n\\n#demoAndCodeSnippetBox pre,\\n#demoAndCodeSnippetBox .code-toolbar {\\n  height: 100%;\\n  margin: 0;\\n  white-space: pre-wrap;\\n  width: 100%;\\n  overflow: auto;\\n}\\n\\nlabel[for=\\\"imageSelector\\\"] {\\n  display: block;\\n  margin-bottom: 0.25rem;\\n}\\n\\niron-selector > *:not([selected-configuration]) {\\n  display: none;\\n}\\n\\n.configuration-panel {\\n  padding: 1rem;\\n}\\n\\n#keywordPanel {\\n  display: grid;\\n  grid-template-columns: 1fr 1fr 1fr;\\n  grid-gap: 1rem;\\n  align-items: center;\\n}\\n\\n#textContent p {\\n  max-width: 100%;\\n  font-family: \\\"Google Sans Text\\\", \\\"Google Sans\\\", Roboto, Helvetica, sans-serif;\\n  line-height: 1.4;\\n}\\n\\n#textContent p + p {\\n  margin-top: 1rem;\\n}\\n\",\"js\":\"\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"typescript\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2021-09-13T15:04:50.000Z\",\"updated_at\":\"2021-09-13T15:04:50.000Z\",\"title\":\"Learn CSS - Using background-attachment: fixed on a background-image\",\"description\":\"\",\"slug_hash\":\"MWoozvN\",\"head\":\"<script src=\\\"https://assets.codepen.io/7518/prism-learn-css-script.js\\\"></script>\\n<link href=\\\"https://assets.codepen.io/7518/prism-learn-css.css\\\" rel=\\\"stylesheet\\\">\\n\\n<link\\n    href=\\\"https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Google+Sans+Mono|Google+Sans:300,400,500,600,700|Google+Sans+Text&display=swap\\\" rel=\\\"stylesheet\\\">\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":54622379,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"017bdfb0-7a50-7fe5-be40-ba125e7e902e\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-07db07496998e6dde62c.js"}