Blog Layout
Background Overlay
April 29, 2024
Background Overlay
Background overlays are employed to improve text readability on top of background images, ensuring that the message is clear and legible. However, an overlay might be too dark if it adversely affects the user interface or the overall design. Consider the following when evaluating the darkness of an overlay:
- Text Legibility: If the text is difficult to read against the overlay, suggesting that contrast is insufficient, then the overlay may be too dark.
- Design Balance: An effective overlay complements the content; it should not be so dominant that it becomes the main focus unless intentionally designed that way.
- Visibility of Background:
The overlay should be light enough that the background image is discernible. If the image details are lost, the overlay is too dark, defeating the purpose of using an image instead of a solid color background.
An overlay should strike the right balance, providing sufficient contrast for legibility while still allowing the background image to support the design narrative. If the overlay obscures the image to the point where its presence becomes irrelevant, adjusting the darkness or considering a different design approach might be necessary.
What to Know Before You Submit / Upload a Photo Images can make or break a small business website. Whether you’re a contractor, hairstylist, dentist, or restaurant owner, the photos you upload should build trust, highlight your work, and make your business look professional. Most business owners aren’t photographers. They're using iPhones or Androids, often snapping pictures during the workday. That’s fine — as long as you follow a few simple best practices. This guide covers what you need to know before you add images to your site, including: The right image sizes and formats for web What types of images help convert leads How to take better photos of your team and your work Tips for lighting, composition, naming, and consistency When to not use images at all The tips here work for any type of business — we’ve just included examples from home service contractors since they make up a large number of Hibu sites. Let’s get everything in frame.
Pixel vs. Percentage Units: Why They Matter in Responsive Web Design When you're building websites that need to work across all screen sizes—from wide desktop monitors to narrow mobile phones—how you size elements matters. At Hibu, we design for everyone. That means every element must display correctly on every device. If your content is misaligned, crammed, or floating awkwardly, users won’t stick around—and they won’t convert. One of the most important layout choices you’ll make is whether to use pixel or percentage units for sizing.
How to Use the Contrast Checker Text needs to be easy to read—on every device, for every visitor. At Hibu, we aim to make every website as easy to read as possible. The HWP Contrast Checker helps with that by showing whether your text color has enough contrast against the background. You’ll find it inside the color picker whenever you're selecting a text color.
Training Overview: Initial Build Setup vs. Editor 2.0 & Collection Site We're moving from the current initial build setup to a new approach with Editor 2.0 and the Collection Site . This transition is more than just switching editors—it changes how we structure content, manage data, and ensure consistency across sites.