HOLLA TECH - LEARN

The background-size Property
 

The background-size property adds new functionality to CSS that allows us to specify the size of background images, using either lengths or percentages.

For example: 

div {
   height: 150px;
   width: 200px;
   border: 1px solid #000;
   background: url(“css_logo.png”) no-repeat 50% 50%;
   background-size: 100px 100px;
}

 

Result: 

Holla Tech - Learn CSS3

NOTE!
The current versions of most popular browsers – including Firefox, Safari, Chrome, Internet Explorer, and Opera – now support background-size, without the need for vendor prefixes.

The background-size Values
 

The two other possible values for background size are the keywords contain and cover.

The contain keyword scales the image so that it fits the container.
In other words, the image will grow or shrink proportionally, but the width and height will not exceed the container’s dimensions:

CSS syntax looks like this:

background-size: contain;

 

Result: 

Holla Tech - Learn CSS3

background-size also accepts the cover keyword. The image is scaled to fit the entire container; however, if that has a different aspect ratio, the image will be cropped:

CSS syntax looks like this: 

background-size: cover

 

Result: 

Holla Tech - Learn CSS3


BACK NEXT

 

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT