How can I achieve full-width images like on Webflow's website?

TL;DR
  • Set image as background, adjust position to "Center" and size to "Cover."
  • Use image element, set width to 100%, and ensure the parent container is full-width.
  • Adjust section/div container width to 100vw.
  • Add custom CSS if needed for full responsiveness.

If you want to create full-width images in Webflow similar to those on Webflow’s own website, here’s how to do it.

​

1. Set Image as a Background

  • Select the Section where you want the image to appear full-width.
  • In the Style Panel, go to the Background section.
  • Upload your Image and set it as a background image.
  • Set the Image Position to "Center" and the Size to "Cover" to ensure full-width and to maintain aspect ratio.

​

2. Use Full-Width Image Element

  • Drag an Image element into the Webflow Designer.
  • Upload your Image using the Image element.
  • Set the image's Width to 100% in the Style Panel.
  • Make sure the parent container is set to full-width or a width of 100% to ensure the image displays correctly across the entire width.

​

3. Adjust the Container's Width

  • Ensure that the Section/Div containing the image is set to full width.
  • In the Style Panel, set the Width to 100vw. This stands for "100% of the viewport width," stretching the image to fill the entire screen width.

​

4. Add Custom Code if Necessary

  • While avoiding raw HTML, if necessary, include custom CSS in the Page Settings under the Custom Code section to ensure full responsiveness.
  • Use CSS width properties such as width: 100vw; to help control full width across devices.

​

Summary

To achieve full-width images like those on Webflow's site, either use background images that cover a section or set the Image element’s width to 100%, ensuring both the image and its container span the full screen width. Adjust image positioning and size settings in the Style Panel for optimal display.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I host a javascript for use in Webflow since the tutorial I found on the forum that uses Github is no longer available?
How can I add preloaded images as options for users to select or add in Webflow CMS for different produce varieties?
How do I change the color of the headers in Webflow CMS articles separate from the body text using custom CSS?
How can I resolve an issue with an interaction overriding the hover state in Webflow? The desired outcome is for the text color to change to purple when hovering over a title, and for the element to become 'active' and trigger certain changes when clicked.
What are some suggestions for creating a website with two main categories, multiple subcategories with 20-150 software programs each, and individual pages for each program using Webflow's CMS functionality?
Does Webflow have a built-in way to access external services via REST API, including those requiring authentication like Google, Facebook, and MailChimp?
How can I trigger a typing text effect within the same wrapper in Webflow, first vertically and then horizontally?
How can I get an XML feed in Webflow and style it?
How can I automate the process of assigning session credits to a user profile in Webflow based on the package they choose, deducting credits when they book a session, and prompting users to purchase more credits when they run out?
Can I limit the width of a row in Webflow flexbox so that additional divs move to a second row?
Is it possible to use custom code in Webflow to give each item in a collection list its own unique class, so that they can have different attributes without affecting the entire list?
How can I design a responsive heading with a link in Webflow without the link formatting becoming incorrect when using flex text? I've tried adjusting font size and adding spans to move certain elements to the next line, but the results are inconsistent. What am I missing?
What could be causing the issue with the broken URL in Webflow that includes "www.www." and what steps can be taken to fix it?
How can I resolve the validation failure error message in Webflow while trying to publish a new blog post via CMS?
What is the recommended maximum width for a Webflow div block container to fit most display screen sizes, excluding the standard 940px container, considering the large screen size of an iMac Retina?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?