How to Add a Background Image to a Slide in Webflow
In this article
Learn how to customize your Webflow slides by adding a background image. This guide will walk you through selecting a slide, accessing style settings, and applying an image from your assets.
Explore more Webflow tutorials with interactive Saltfish walkthroughs.
Here's how to add a background image to a slide in Webflow
- Select Your Slide
Begin by clicking on the specific slide element within your Webflow canvas where you want to apply a background image. This action will highlight the slide and make its properties editable in the right sidebar.
- Access Style Settings
Once the slide is selected, navigate to the right-hand sidebar and click on the "Style" tab. This tab contains all the visual styling options for your selected element, including background properties.
- Expand Backgrounds Section
Within the Style tab, locate and click on the "Backgrounds" section header. This will expand the section, revealing options to add colors, gradients, or images to your slide's background.
- Add a Background Image
Click the "+" icon next to "Image & gradient" to initiate the process of adding an image. Then, click "Choose image" to open your Webflow Assets panel, where you can manage your media files.
- Upload or Select Image
In the Assets panel, you can either click "Upload" to import a new image from your device or select an image that you have previously uploaded. After selection, the image will be applied to your slide.
- Adjust Image Display Size
Finally, choose a "Size" option, such as "Contain," from the image settings panel. This controls how your background image fits within the slide, ensuring it appears as desired without distortion.
Your turn to show how it works.
Build a walkthrough of your product with Saltfish, then share it with your customers.
Frequently Asked Questions
You can select a slide by clicking directly on it within the main content area of your Webflow canvas. A blue outline will appear around the selected slide.
Webflow
