One of the bigger trends around the web, including on our own website, is landing visitors on big, bold home pages with a beautiful fullscreen graphic. They not only make a statement, but they’re a great way to focus your users and guide them along your journey. The challenge is getting your fullscreen image to scale responsively for various browsers and devices. We’re going to use CSS to accomplish these tasks.
Let’s dive in it.
In this case, we’re going to apply our fullscreen background image to the body element. You can apply this to whatever you need – a class, ID, HTML, article, section elements the choice is yours.
background: url(‘img/fullBG.jpg’) no-repeat 50% 50% fixed;
So what in the world is going on here? Well first we link to our background image, we tell it not to tile/repeat with no-repeat, we want the background image to be position in the center (50%) on the X-Axis & center (50%) of the Y-Axis, and that we want the background’s attachment to be fixed with regard to the viewport. If you’ve used background images before that’s fairly basic stuff.
Where the real action happens is the background-size. And how big do we want our fullscreen background image to be? Smothered & covered on the page. Luckily, CSS3 makes that easy and has a property called cover that will do just that. The problem is that not all browsers support background-size as is, so for Firefox we have -moz-background-size, Opera uses -o-background-size and -webkit- renders for Safari & Chrome.
Fullscreen Background Image Conclusion
So now you should be rendering a full page with a scalable, responsive fullscreen background image. You can do any number of things like call-to-actions, navigation bars, big beautiful quotes or whatever else you can dream up.