---
title: "Background properties"
date: "2017-11-11T07:46:52+00:00"
summary: "Customize element backgrounds with ease using Site Studio's background properties. Learn how to apply colors, images, and gradients to enhance your website's visual appeal and user experience."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/background-properties"
id: "a3a897f1-f29f-4a46-a69f-f7888a917601"
---

Table of contents will be added

Background properties allow you to apply background colors, images and gradients to an element. 

Adding background properties to a style
---------------------------------------

To add background properties to a style:

1.  Navigate to the Style builder. This is available when you edit [Base styles](/drupal-starter-kits/add-ons/site-studio/creating-base-styles "Creating base styles") or [Custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles"). For more, see [Using the style builder](/drupal-starter-kits/add-ons/site-studio/using-style-builder "Using the style builder")
2.  Within the Style editor area, click on the **Properties** button
3.  Then select Background > **(Select a Background sub-group)** in the menu

The Background properties include the following groups of fields:

Background image
----------------

*   **Image upload -** Opens the file browser for uploading and selecting an image
*   **Size -** Set how the background image size should be applied
*   **Repeat -** Set the background to repeat and in which direction
*   **Attachment -** Set the background to scroll with the page or be fixed to the viewport
*   **X position -** Set the horizontal position
*   **X offset -** Set the horizontal offset of the image
*   **Y position -** Set the vertical position of the image
*   **Y offset -** Set the vertical offset of the image

For details of each property, see [Background image and gradient properties.](/drupal-starter-kits/add-ons/site-studio/background-image-and-gradient-properties "Background image and gradient properties")

Background gradient
-------------------

*   **Gradient picker -** Create and add a gradient as a background

For details of each property, see [Background image and gradient properties.](/drupal-starter-kits/add-ons/site-studio/background-image-and-gradient-properties "Background image and gradient properties")

Background color
----------------

*   **Color picker -** Set the background color of the element

For details of each property, see [Background color properties.](/drupal-starter-kits/add-ons/site-studio/background-color-property "Background color property")