FULL SCREEN BACK PLAN CONFIGURATION WITH CSSsteemCreated with Sketch.

in #softeware7 years ago (edited)

 

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-repeat center center fixed;  -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. 

Coin Marketplace

STEEM 0.17
TRX 0.16
JST 0.028
BTC 76064.81
ETH 2914.44
USDT 1.00
SBD 2.61