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.
6 thoughts on “Full Screen Background Image with CSS”
above css i am using for my web page but its fitting to desktop but its not fitting to laptop and mobiles.
Hi veena! Unless you provide your code by either giving us the link to your webpage or using online code editors such as CodePen or jsbin, we would be unable to help you unless you want us to shoot arrows in the dark.
Hi Kanishk Kunal ,I am beginner in this field.I completely did “COPY AND PASTE” of this code for background image but using different image source.The result is that I could not be able to get background image.When I use your given image source ,then I get the perfect result.
Hi Harshil, the only reason I can think of is that you are not providing the correct image URL in your code. Make sure the image URL is correct and you can access it by directly visiting the URL from your browser.
Hi Kanishk Kunal,
First, let me thank you profusely for the code on this particular use case, responsive global background image in CSS(!). I spent a half day on this, reading Stack Overflow threads (no one had your elegant solution – brilliant!) and trying everything, to no avail. One of your commentors noted having trouble getting your solution to display the image. I had the same issue too, until I changed CSS attribute “background-image:” (which I had copied out of W3Schools) to your CSS “background:” attribute. Now it works flawlessly. Blessings on you Kanishk. Jack Whitley
Glad to know that. Thanks!