How can I create a full width div as a symbol in Webflow to easily use on multiple pages with different background images? Thank you!

To create a full-width div as a symbol in Webflow that can be used on multiple pages with different background images, you can follow these steps:

1. Create a new symbol: Go to the Symbols panel on the left-hand side of the Webflow Designer interface and click on the "+" button. Give your symbol a meaningful name, like "Full Width Div."

2. Design the full-width div: Drag and drop a div block onto the canvas. Make sure the div block spans the entire width of the canvas. You can do this by setting its width to 100% or by dragging the handles of the div to stretch it across the canvas.

3. Set the background image: With the div block selected, go to the Style panel on the right-hand side of the interface. Click on the "Background Image" property and upload or select the desired background image. You can also adjust the background position, size, and repeat settings to customize how the image is displayed.

4. Save the symbol: Once you're happy with the design of the full-width div, click on the "Create Symbol" button in the top-right corner of the canvas. Your full-width div will now be saved as a symbol and can be reused across multiple pages.

5. Use the symbol on different pages: To add the symbol to a page, simply drag and drop it from the Symbols panel onto the canvas. You can then customize the symbol's background image by selecting it and going to the Style panel. Here, you can replace the background image with a different one specific to that page.

By creating a symbol with a full-width div and customizing the background image for each page, you can easily maintain consistency across your website while allowing for variation in background images.