Logo

Knowledge Base - Public Website Builder

How can we help?

Make a Header Image Span the Width of the Screen

Tips & Extras

Make a Header Image Span the Width of the Screen

This article will explain how to make a header image span the width of the screen without being cut off

Last updated on 29 Oct, 2025

Here are the steps to make a header image span the width without being cut off:

  1. In the admin menu click the +Content button and choose Objects then the image object

  2. In that new block that was added, click the "Choose an image" button and upload/select the image you want

  3. In the block, click the gear icon in the upper left for the block settings

  4. Uncheck the "Default Block Spacing" setting then change the top and bottom padding to zero

  5. Uncheck the "Boxed in Container" setting

  6. Click the "Save Changes" button

  7. In the block, click the gear icon in the upper left for the block settings

  8. Click the HTML button in the upper left. Now for the scary part :-)

  9. Look for something like the following: <img class="img-fluid" alt="" title="" src="data/files/yourfilename.png">

  10. Change class="img-fluid" to class="img-fluid w-100"

  11. Click "Save changes" at the bottom

  12. That's it! The image should not span the width without being cut off

Was this page helpful?
Previous

Downloading Photos From a Photo Gallery

Next