Header Sections and Images

I am trying to understand how to have responsive images in the header section of my sites. I use images from Deposit Photos. They come in these sizes.

1000 × 662, JPG - 3.33" × 2.21" (300 dpi)

2000 × 1325, JPG - 6.67" × 4.42" (300 dpi)

3877 × 2568, JPG - 12.92" × 8.56" (300 dpi)

7754 × 5136, JPG - 25.85" × 17.12" (300 dpi)

3877 × 2568, JPG - 12.92" × 8.56" (300 dpi)

For my headers, I add a section element first and then add an image as a background section. Is this recommended for the header to make the images responsive? My header is usually 500 pixels in height. I have 2 questions. Is there a process in Webflow to make sure my header images are always responsive? Is there a specific size image that I should be using to make my headers responsive?


Here is my site Read-Only: https://preview.webflow.com/preview/davids-superb-project-c6e-a55cb9545048a?utm_medium=preview_link&utm_source=designer&utm_content=davids-superb-project-c6e-a55cb9545048a&preview=bbc35496badcb78f7233a8afbcb04886&pageId=5bbc3911b50949417cac1edf&mode=preview

I suggest reading this Webflow University article.

1 Like