How can I create a background image with two pictures, a white line, and a blue background in Webflow? The current method I'm using with one big background image is not accurate in terms of size, scalability, and quality. Is there a better way to achieve this in Webflow? Thank you for your help.
TL;DR
- Add a blue "Div Block" as the container and insert two "Image elements" inside for each picture.
- Align images using Flexbox or Grid, add another "Div Block" as the white line between images, and set its width to 1-2 pixels.
- Ensure responsiveness with percentage-based widths, test design across devices, and use CSS classes for styling.
To create a background image with two pictures, a white dividing line, and a blue background in Webflow, consider using separate elements for greater control over size and scalability.
1. Create a Div Block for the Entire Background
- Add a Div Block to your canvas to serve as the overall container for your background.
- Apply a blue background color to this Div Block to set the base color.
2. Insert Image Elements for Each Picture
- Inside the Div Block, add an Image element for each picture you want to use.
- Upload and assign the first image to the first Image element, then do the same for the second image.
3. Position the Images
- Use Flexbox or Grid layout for the Div Block to align the images side by side.
- Ensure both images are properly scaled by setting them to Cover or keeping a consistent aspect ratio.
4. Add the White Dividing Line
- Add another Div Block between the two Image elements.
- Set the width of this Div Block to 1-2 pixels (or according to preference) and apply a white background color.
- Adjust the height to match the images, and use positioning tools to align it between them.
5. Adjust Responsiveness
- Test the design at various screen sizes.
- Utilize percentage-based widths or Webflow Units like VW (Viewport Width) to ensure scalability.
6. Use CSS for Optimization
- Consider applying CSS custom classes in Webflow to the Div elements and images for additional styling and responsiveness.
Summary
By using separate Div Blocks and Image elements for the two pictures and the white line within a larger blue-background Div, you can ensure that your background is accurately sized, scalable, and maintains high quality across different devices.
