HTML Templates •
Last updated: January 21, 2026

Managing Media in Brandflow

Brandflow HTML Site Template

Table of Contents

Image Structure

Brandflow organizes images by section in assets/images/:

  • Blog: blog-1.webp through blog-10.webp
  • Portfolio: showcase-1.webp, portfolio-v-1.webp
  • Team: team-1.webp, team-2.webp
  • Backgrounds: hero-bg-1.webp, shpae-1.png

Replacing Assets

Hero Background

The main hero background is often set via an <img> tag with absolute positioning or a CSS background.

  • Look for hero-bg-1.webp in index.html.
  • Replace this file to change the main landing visual.

Logos

  • header-logo.svg: The main logo in the navigation.
  • Ensure your replacement SVG or PNG has similar dimensions to maintain alignment.

Hover Effects & Overlays

Brandflow uses CSS-based overlays for images (e.g., the gold tint on hover).

  • These are often <div class="overlay-images ..."> elements sitting on top of the <img>.
  • If you change an image size, ensure the parent container (relative) and the overlay (absolute) dimensions still match.

Video

If the template includes video sections (often using standard <video> tags or embeds), ensure you provide a poster image (poster="image.jpg") that matches the site’s aesthetic while the video loads.