Hi friends, in this article I will describe how to make a full-screen background that we often encounter in CSS related projects.Regardless of the resolution of the background and the screen resolution of the user, our background needs to completely cover the page.If there are a few ways to do this, we will do this in a simple way.
1. Example :
html {background: url(resimyolu) no-repeatcentercenterfixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
With this example, we can achieve the structure we want in a standard way.
2. Example :
HTML
<divid="web-bg"><imgsrc="resimyolu"alt=""></div>
CSS
#web-bg {position: fixed;top: -50%;left: -50%;width: 200%;height: 200%;}#web-bg img {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;min-width: 50%;min-height: 50%;}
With this example, we can create a html structure and get a full screen background view with the background we gave to the img tag.There are alternative examples of these examples but I would like to mention these two in my writing. The standard example and the example I mentioned is the first example. Usually the first example is already used on the sites.