> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://revolution-slider.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to Add Images and Background Images in Slider Revolution 7

Slider Revolution 7 gives you two main ways to use images in your slider:

- **Image Layer** — an image you can move, resize, and position anywhere on your slide.
- **Background Image** — an image used as the background of the entire slide.

In this guide, you'll learn how to use both.

---

# Part 1: Add an Image Layer

## Step 1: Open Your Slider

From your Shopify admin, open **Slider Revolution**.

Find the slider you want to edit and open it in the **Slider Revolution 7 editor**.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_mo6xw2.png =900x335)


---

## Step 2: Add an Image Layer

In the editor, select **Add Layer** and choose **Image**.


![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_txmpgq.png =450x590)

This will open the image selection window.

---

## Step 3: Select Your Image

Choose the image you want to use.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1krju3a.png =900x398)


After selecting the image, it will appear as a new layer on your slide.

---

## Step 4: Resize and Position the Image

Select the image layer on the canvas.

You can resize the image and move it to the position where you want it to appear.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1sn4zh3.png =900x403)


Image layers are useful when you want to combine images with text, buttons, products, or other elements.

---

# Part 2: Add a Background Image

## Step 5: Select the Slide

Select the slide where you want to add the background image.

Open the **Slide Options** or background settings.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_ttgtfz.png)


---

## Step 6: Choose an Image as the Background

Select the Slide BG Layer and select **Image** as the background type.

Choose the image you want to use.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_ipf7bm.png =900xauto)

The selected image will now appear as the background of your slide.

---

## Step 7: Adjust the Background Image

Use the available background settings to control how the image appears inside your slider.

You can adjust settings such as the image size and position depending on your design.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_6vll7b.png)

> **Tip:** If you're using a photo with a person, product, or important text, make sure the important part of the image remains visible when the slider changes size.

---

## Step 8: Check the Image on Different Devices

Use the responsive/device controls to check your slider on desktop, tablet, and mobile.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1vb8lqx.png =900x260)

Background images may be cropped differently depending on the screen size, so make sure your slider looks good on each device.

---

## Step 9: Save and Preview Your Slider

Once you're happy with the image, click **Save**.

Use **Preview** to see how the finished slider will look.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1rro36w.png)


That's it! You've successfully added an image layer or background image to your Slider Revolution 7 slider.

> **Tip:** Use optimized images whenever possible. Large image files can increase your slider's loading time and affect your storefront performance.