Many modern web designs have started to adopt a large background image which covers the entire width and height of browser window. The website content is placed on top of this full-screen background image. The background image remains fixed at its position as user scrolls and is also responsive, therefore is suitable to be viewed on all device sizes.
In this post I will show, how we can easily place such full screen background images in websites using CSS3. This code example should work in all modern browsers which support CSS3 (IE9+, Chrome, Safari, Opera 10+ and Firefox 3.6+)
CSS code for Full-Screen background image
The full screen background image is generally placed as
background property of
body tag. Below we have added the CSS code to the
body tag for setting a full screen background image.
Note the use of
background-size property which is present in CSS3 and by setting this property to
cover we are asking the browser to use the background image to cover the entire width and height of the browser window.
We have also asked the browser to keep the background image centered and fixed at its position. Due to this, when user scrolls, the background image stays at its place. And when user resizes the browser window, or views it on device with different sizes, the background image gets automatically stretched or clipped in order to cover the entire width and height of browser window.
Demo of Full-Screen Background Image
As you can see it is pretty easy to set an image as full screen background image and works well with responsive web design. You can view the demo as well as the full code on CodePen using one of the options below:
Or Play with the CodePen embed below:
Support for Older browsers
Credit for Background Image used
The background image used in the demo above has been taken from Pixabay and is licensed CC0 i.e. free for commercial use too. You can find more such free high quality images and free images for commercial use and many other free resources on SuperDevResources.