backgroundSize Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:backgroundSize

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. backgroundSize

Description

The backgroundSize property sets or gets the background images size.

Property Values

Value Description
auto Default value. The background-image contains its width and height
length Sets width/height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
percentage Sets the width/height in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
cover Enlarge the background image to cover the element.
containScale the image to fit inside the content area
initialSets this property to its default value.
inheritInherits this property from its parent element.

Technical Details

Item Value
Default Value: auto
Return Value: A String, representing the background-size property of an element
CSS VersionCSS3

Set the size of a background image:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*from   w w w .j a v a2  s  .c  om*/
    border: 1px solid black;
    width: 300px;
    height: 300px;
    background: url('http://java2s.com/resources/a.png') no-repeat;
}
</style>
</head>
<body>

<button onclick="myFunction()">Test</button>

<div id="myDIV">
  <h1>Hello</h1>
</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.backgroundSize = "60px 120px";
}
</script>

</body>
</html>

Related Tutorials