background-size - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-size

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background-size

Description

The background-size CSS property specifies the size of the background images.

The following table summarizes the background-size Property.

Item Value
Default value: auto auto
Applies to:All elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 

background-size:      length | percentage | auto | cover | contain | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length Use length to set the width and height of the background image. The first value sets the width, and the second value sets the height. If one value is specified the second is set to be auto. Negative length values are not allowed.
percentage Use percentage to set the width and height of the background image. The first value sets the width, and the second value sets the height. If one value is specified the second is set to be auto. Negative percentage values are not allowed.
auto An auto value for one dimension scales the background image in the corresponding direction such that its intrinsic proportion is maintained.
cover Scale the image to cover the background positioning area.
containScale the image to fit inside the background positioning area.
initialSets this property to its default value.
inherittake the value of its parent element background-size property.

The example below shows the background-size property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Example of CSS3 background-size Property</title>
  <style type="text/css">
  .box {<!--from   www.  ja va2s .  c  o  m-->
    width: 250px;
    height: 150px;
    background: url("https://www.java2s.com/style/demo/Opera.png") no-repeat;
    background-size: contain;
    border: 6px solid #333;
  }
</style>
 </head>
 <body>
  <div class="box"></div>
  <p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p>
 </body>
</html>

Related Tutorials