{"id":57512,"date":"2025-05-19T15:54:47","date_gmt":"2025-05-19T12:54:47","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=57512"},"modified":"2025-11-10T14:30:51","modified_gmt":"2025-11-10T12:30:51","slug":"style-tab-background","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/style-tab-background\/","title":{"rendered":"Style tab – Background"},"content":{"rendered":"\n

[callout title=”Who can use this feature:”]This article is for Editor v4 users. If you’re using Editor v3, check out the relevant article here: Advanced tab<\/a>[\/callout]<\/p>\n\n\n\n

Adding a background to elements is an important part of any web design. It can help the element stand out, be a way of layering text over images or simply making the page look better.<\/p>\n\n\n\n

Element backgrounds can incorporate colors, gradients and images. These backgrounds can contain multiple layers, allowing you to create different effects such as layering text and images. For details, see Add a layered background<\/a>.  <\/p>\n\n\n\n

Add a background to an element<\/h2>\n\n\n\n

To add a background<\/strong>: <\/p>\n\n\n\n

    \n
  1. Open the Elementor Editor.
    \"\"<\/li>\n\n\n\n
  2. Click the Style<\/strong> tab.
    \"\"<\/li>\n\n\n\n
  3. Open the Background<\/strong> field. 
    \"\"<\/li>\n\n\n\n
  4. To add a color, click the color swatch or add a code to the text box. For details, see Use the color picker<\/a>.<\/li>\n\n\n\n
  5. To add an image:
    \"\"\n
      \n
    1. Click the plus sign next to Overlay<\/strong>. 
      \"\"<\/li>\n\n\n\n
    2. Hover over the image field and choose to upload or select an image. For details, see Adding images and icons<\/a>.
      \"\"<\/li>\n\n\n\n
    3. Add options for the Image. See Image options<\/a> below.
      \"\"<\/li>\n<\/ol>\n<\/li>\n\n\n\n
    4. To add a gradient, select Gradient<\/strong> from the top panel. See Gradient options<\/a> below.<\/li>\n\n\n\n
    5. (Optional) You can add more layers to the background. These layers can be colors, images and\/or gradients. For details, see Add a layered background<\/a>.<\/li>\n<\/ol>\n\n\n\n

      Image options<\/h2>\n\n\n\n

      After selecting an image you have a number of options for how that image is displayed.<\/p>\n\n\n\n