Drawing Fieldtrip Logo Dots
by: Fieldtrip

CSS: How to Create a Fullscreen Background Image

A CSS tutorial.

Create a full page with a scalable, responsive fullscreen background image.

Want create site? Find Free WordPress Themes and plugins.

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.

css fullscreen backgrounds

Let’s dive in it.

The HTML

[html]
<body id=”background”>

</body>
[/html]

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.

The CSS

[css]
body#background {
background: url(‘img/fullBG.jpg’) no-repeat 50% 50% fixed;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
[/css]

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.

Want to see it in action? Click here to check out the JSFiddle.

Did you find apk for android? You can find new Free Android Games and apps.
work with us +