How To Get Background To Fit Screen Css

Question

There is a CSS3 belongings for this, namely groundwork-size (compatibility check). While one can set length values, it'southward usually used with the special values contain and encompass. In your specific case, you should utilise cover:

          torso {     groundwork-image:    url(images/background.svg);     background-size:     comprehend;                      /* <------ */     background-repeat:   no-echo;     groundwork-position: centre center;              /* optional, centre the paradigm */ }

Eggsplanation for `comprise` and `cover`

Sorry for the bad pun, only I'chiliad going to use the moving-picture show of the day past Biswarup Ganguly for demonstration. Lets say that this is your screen, and the grayness expanse is outside of your visible screen. For demonstration, I'm going to presume a 16x9 ratio.

screen

Nosotros want to use the aforementioned picture of the twenty-four hours as a background. Notwithstanding, we cropped the epitome to 4x3 for some reason. Nosotros could set the background-size property to some fixed length, but we volition focus on contain and encompass. Note that I also presume that nosotros didn't mangle the width and/or height of body.

`incorporate`

            contain                      
Calibration the epitome, while preserving its intrinsic attribute ratio (if any), to the largest size such that both its width and its tiptop can fit inside the background positioning area.

This makes sure that the background image is always completely contained in the background positioning surface area, yet, there could be some empty infinite filled with your background-color in this case:

contain

`cover`

            cover                      
Calibration the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its pinnacle tin completely cover the background positioning surface area.

This makes sure that the groundwork image is covering everything. There volition exist no visible groundwork-colour, nevertheless depending on the screen'south ratio a great function of your epitome could be cut off:

cover

Demonstration with actual code

            div > div {   background-image: url(http://i.stack.imgur.com/r5CAq.jpg);   background-repeat: no-repeat;   background-position: center eye;   background-colour: #ccc;   border: 1px solid;   width: 20em;   height: 10em; } div.contain {   background-size: contain; } div.comprehend {   groundwork-size: cover; } /********************************************  Additional styles for the explanation boxes  *********************************************/  div > div {   margin: 0 1ex 1ex 0;   float: left; } div + div {   clear: both;   border-elevation: 1px dashed silver;   padding-top:1ex; } div > div::later {   background-color: #000;   color: #fefefe;   margin: 1ex;   padding: 1ex;   opacity: 0.8;   display: block;   width: 10ex;   font-size: 0.7em;   content: attr(class); }

            <div>   <div class="contain"></div>   <p>Notation the greyness background. The image does not cover the whole region, merely it'south fully <em>contained</em>.   </p> </div> <div>   <div class="comprehend"></div>   <p>Note the ducks/geese at the bottom of the paradigm. Most of the water is cut, as well as a part of the sky. You don't run across the complete image anymore, simply neither exercise you run across any groundwork colour; the image <em>covers</em> all of the <lawmaking>&lt;div&gt;</code>.</p> </div>

How To Get Background To Fit Screen Css

Eggsplanation for `comprise` and `cover`

`incorporate`

`cover`

Demonstration with actual code