# Full Bleed

> Images and backgrounds that extend to the absolute viewport edge with no margins — immersive, editorial, and cinematic.

- Category: Layout-driven
- Era: 2010s–present
- Origin: Print magazine design — elements printed to the physical edge of the page
- Lesson: https://design.dawit.dev/styles/full-bleed
- Try it: https://design.dawit.dev/styles/full-bleed?style=full-bleed

## Where it came from

In print, "bleed" is content printed beyond the trim edge so no white gap appears after cutting. The web equivalent arrived as designers moved from fixed-width tables to full-viewport CSS. Full-bleed became a defining move in editorial web design, long-form journalism sites, and photo-heavy marketing pages. The challenge is maintaining readable type zones when image content reaches all four edges.

## How to spot it

- Images and section backgrounds extend to the viewport edge — no outer margin
- Zero horizontal margin on hero and section backgrounds
- Type has its own internal padding, but the coloured or image block spans full width
- Strong section-to-section contrast — full-width bands of alternating colour or image

## Strengths

- Highly immersive and cinematic — the page feels like a physical space
- Powerful for photography, video, and art-direction-first design
- Clear hierarchy from full-width section breaks

## Weaknesses

- Text contrast over full-bleed images requires careful treatment every time
- Inner containers still need a max-width for readable line lengths
- Can feel empty at very wide viewports without strong image content

## In the wild

- Long-form journalism sites
- Photography studio and agency landing pages
- Film and music artist release pages

## Use it when

Editorial, portfolio, or image-first marketing sites where immersion and visual impact are the primary goals.

## Related styles
[Editorial](https://design.dawit.dev/styles/editorial.md), [Split Screen](https://design.dawit.dev/styles/split-screen.md), [Long Scroll](https://design.dawit.dev/styles/long-scroll.md)