Background Gradient 100% body CSS

I need a body background that used the whole viewport. Time ago I used to see solutions like html{ height: 100%;} or set in the body.

None of these worked for me in my different scenarios when using a background gradient.

Solution: fixed

Adding fixed at the background gradient style fixes everything everywhere. Weather the page is short (smaller than the browser window), long pages, iPad, iPhone...

Here's a background gradient example with the fixed attribute.

body { background: #00acc1; background: -moz-linear-gradient(-45deg, #00acc1 0%, #24678d 44%, #24678d 100%) fixed; background: -webkit-linear-gradient(-45deg, #00acc1 0%,#24678d 44%,#24678d 100%) fixed; background: linear-gradient(135deg, #00acc1 0%,#24678d 44%,#24678d 100%) fixed; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00acc1', endColorstr='#24678d',GradientType=1 ); }
Code language: CSS (css)


View Demo

About Ricard Torres

Senior Front-end Software Engineer at Netcentric, from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

Leave a Reply

Add <code> Some Code </code> if you need to.