Home / Layout Patterns / Full Bleed
Full Bleed CSS Template, Free with Live Demo
Free full bleed website template with edge to edge, screen filling sections and big type over CSS landscapes. Built for a tour company. Live demo. The example is North Atlantic Walks, a hiking tour company.
What is full bleed?
Full bleed means the picture runs right to the edge of the screen with no margins. Each section fills the whole window, so scrolling feels like moving from one scene to the next.
It is the go to layout for travel and outdoor brands, where the place is the product. Big text sits at the bottom of each scene, over a soft dark fade so it stays readable.
Good for
- Travel and tour companies
- Hotels and resorts
- Outdoor and adventure brands
- Film, event and campaign pages
What you get in this template
- Three full screen sections at 100vh
- Landscapes, sunset and night sky drawn in CSS
- Dark fade at the bottom for readable text
- Big Unbounded headlines
- Trip facts row and booking button
The key CSS
This is the part that makes the full bleed look work. Copy it into your own project.
.full {
min-height: 100vh;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 40px 6vw 8vh;
position: relative; overflow: hidden;
}
.bg { position: absolute; inset: 0; }
.full .bg { box-shadow: inset 0 -40vh 30vh -10vh rgba(0,0,0,.55); }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What does full bleed mean in web design?
It means images or backgrounds run all the way to the edges of the screen with no margin or border around them.
How do I keep text readable over a photo?
Add a dark gradient or inset shadow behind the text area, like the fade at the bottom of each section here, and use white bold text.
Can I use real photos instead of CSS art?
Yes. Replace the .bg background with background-image: url(your-photo.jpg) and background-size: cover.
More Layout Patterns designs
021. Bento Grid
Orbit, a smartwatch product page
022. Masonry
Frame Club, a photo community
023. Split Screen
Salt and Ember, a wood fire restaurant
024. Broken Grid
Nomad Linen, a fashion lookbook
025. Scrollytelling
Hilltop Roasters, a bean to cup story
026. Horizontal Scroll
A museum timeline of 100 years of trams
028. Card Carousel
Kiln, a pottery class studio
029. Magazine Layout
Tide and Table, a food and travel magazine