The easiest way to make a full screen background image in CSS is to use the background-size property. The background-size property lets you control how much area of the containing element should the background image cover.
For example, if you set the background-size to 50%, it means the background image will cover only the 50% area of the containing element. Similarly, if you set the background-size to 100%, it will cover the entire element which is the same as background-size: cover;.
The following example sets the ocean.jpg image as the background image of the whole page(<body> tag).
It is to be noted here that we have set the background-attachment to fixed. It means the background image will always be fixed and will not scroll with the rest of the page.
Example:
body{
background-image: url(images/ocean.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center center;
}
If you want to make the background image scroll with the rest of the page you can simply remove the background-attachment property from the above example.
See this example:
Example:
body{
background-image: url(images/ocean.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
