{"id":5783,"date":"2024-04-14T12:23:04","date_gmt":"2024-04-14T04:23:04","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5783"},"modified":"2024-04-14T12:23:04","modified_gmt":"2024-04-14T04:23:04","slug":"background-designs","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/background-designs\/","title":{"rendered":"Background designs"},"content":{"rendered":"\n
\n

*WARNING<\/strong> at 01:23 \u2014 this part may impact individuals with visual sensitivities. Viewer discretion is recommended.<\/p><\/blockquote>\n

Controlling the appearance and readability by setting the backdrop on an element. Within the Design Elements<\/strong> section of the Customization settings<\/strong>, you have the ability to incorporate a backdrop image, gradient, or color to most components (with the exception of media components such as video and photo).<\/p>\n

\n
\"The<\/div>\n<\/figure>\n

Here’s what you’ll learn:<\/strong><\/p>\n

    \n
  1. Backdrop shade<\/li>\n
  2. Backdrop artwork<\/li>\n
  3. Blend<\/li>\n
  4. Shade overlay<\/li>\n
  5. Backdrop film<\/li>\n<\/ol>\n

    Backdrop shade<\/h2>\n

    You have the option to apply a backdrop shade on any component except for artwork and films (although you can utilize artwork and films as backdrops). You can implement a backdrop shade to any component by submitting a shade value (e.g., hex, rgba, or color title) or by opting a shade utilizing the shade picker. A backdrop shade can also be integrated into textual components or specific textual details within a textual component.<\/p>\n

    Sometimes, you might prefer consistent backdrop shades across your site. This is where the Body Section (All pages)<\/strong> label proves beneficial.<\/p>\n

    \n
    \"The<\/div>\n<\/figure>\n

    You can design the Body Section (All pages)<\/strong> label in 2 methods:<\/p>\n

      \n
    1. Choose the Body component and pick the Body Section (All pages)<\/strong> label from the Selector field dropdown in the Design settings<\/strong><\/li>\n
    2. Select any component and select the Body Section (All pages)<\/strong> label from the inheritance menu \u2014 all components inherit designs from the Body Section (All pages)<\/strong> label<\/li>\n<\/ol>\n

      Once you determine the backdrop on the Body Section (All pages)<\/strong>, any component you introduce will default to this backdrop design. And you can modify not just the backdrop shade, but any design characteristic. Discover more about customizing label components in our tutorial on HTML labels.<\/p>\n

      Most components have a translucent backdrop by default. Some components, like the Slider unit, come with a default backdrop shade which you can override by submitting a backdrop shade on the main slider component.<\/p>\n

      Backdrop artwork<\/h2>\n

      Webflow provides numerous choices for modifying your backdrop artwork.<\/p>\n

      \n
      \"The<\/div>\n<\/figure>\n

      To introduce or alter the backdrop artwork: <\/p>\n

        \n
      1. Go to Design Elements<\/strong> in the Design settings<\/strong><\/li>\n
      2. Hit Choose artwork<\/strong> to pick artwork from the Resource panel.<\/li>\n
      3. Tick the box for @2x (to set the artwork width to half its original size for sharp rendering on HiDPI devices)<\/li>\n<\/ol>\n

        To utilize a backdrop film instead, substitute the component with a backdrop film component in the Add panel<\/strong>.<\/p>\n

        Backdrop artwork size<\/h3>\n
        \n
        \"Size<\/div>\n<\/figure>\n

        To define the dimensions of the backdrop artwork, utilize customized dimensions or one of the presets:<\/p>\n