Almost every component in Replo can have a background, which can be a color (solid, or a gradient) or an image.

Background Colors

To add a background color to a component:

1. Select the component you want to give the background color to.
2. Scroll down on the right side of the editor to "Background".
   1. If you want to enter the color as a hex code directly, you can type it into the input field.
   2. You can also click on the icon on the left to open a color picker. From there, you can choose a color from the color wheel, or you can click on the "Linear" button to add a gradient.

To add a background image to a component:

1. Select the component you want to give the background color to.
2. Scroll down on the right side of the editor to "Background".
3. Click "Choose Image".
4. Click "Select Background" to open the image library. Here, you can choose an image from your Shopify Store's theme, or simply add an image via URL.

Adjusting the Background Image's Positioning

After you've added a background image, you have a few options to adjust it's positioning and sizing.

1. The "Size" dropdown lets you specify how the image should be adjusted to fill the background of the container.
   1. "Cover" will resize the image fill the entire background of the container. This is usually a good first choice!
   2. "Contain" will resize the image to fit inside the container, but might not fill the entire background.
   3. "Default" means the image won't be resized at all, even if it doesn't cover the entire background.
2. The "Repeat" dropdown lets you control what happens when the background is big enough that the entire image is too small to fit inside it.
   1. "Tile" means the image will be repeated in order to fill the background.
   2. "No Repeat" means the image will not be repeated, even if it doesn't fill the whole background.
   3. "Repeat X" means the same thing as "Tile", but only in the horizontal direction.
   4. "Repeat Y" means the same thing as "Tile", but only in the vertical direction.
3. The "X Position" and "Y Position" fields let you control how the image is positioned. To nudge the image left and right, you can increase or decrease these values. This is usually the most useful when the "Size" option is set to "Cover".