How can I style this image in Webflow?

To style an image in Webflow, you need to select the image element and apply styles using Webflow's Designer panel. Here's how to do that step-by-step.

1. Select the Image Element

• Click directly on the image in the Designer canvas, or
• Use the Navigator panel to locate and select the image element.

2. Add a Class to the Image

• With the image selected, go to the Selector field in the Style panel.
• Click + and enter a class name (e.g., hero-image). This allows you to apply consistent styling.

3. Adjust Basic Image Styles

• Size: Use Width and Height (can be in %, px, etc.) to control image dimensions.
• Object Fit: Set this to cover, contain, or fill under the Image settings in the Style panel if the image is used inside a container with set dimensions.
• Padding/Margin: Use spacing controls to set distance around the image.

4. Add Advanced Styles (Optional)

• Border Radius: Round corners by setting a value in Border Radius.
• Box Shadow: Apply shadows from the Effects section.
• Opacity or Hover State: Adjust opacity for effects or add styles under the :hover state for interactivity.
• Filters: Use CSS filters (e.g., grayscale, blur) under Effects for visual styling.

5. Responsive Styling

• Use breakpoint tabs in the top bar to style the image differently for desktop, tablet, or mobile views.
• Adjust size, alignment, or visibility depending on screen size.

6. Background Images (If Applicable)

If you're referring to a background image on a Div or Section, and not an <img> element:

• Select the Div or Section.
• Go to the Style panel > Background.
• Click + under Backgrounds to add an image, then adjust Position, Cover/Contain, and Repeat as needed.

Summary

To style an image in Webflow, first assign a class, then use the Style panel to control dimensions, spacing, filters, and responsive behavior. For background images, select the container and style it using the Background section instead.