Javascript DOM CSS Style backgroundRepeat Property

Introduction

Set a background-image to no-repeat: 

document.body.style.backgroundRepeat = "repeat-y";

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
body {/*from w  w w.j ava2s . c o  m*/
  background: #f3f3f3 url('image2.png');
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<button type="button" onclick="myFunction()">Set background image to no-repeat</button>

<script>
function myFunction() {
  document.body.style.backgroundRepeat = "no-repeat";
}
</script>

</body>
</html>

The backgroundRepeat property sets or gets how to repeat a background-image.

Property Values

Value Description
repeatrepeat both vertically and horizontally. Default
repeat-x only repeated horizontally
repeat-y only repeated vertically
no-repeat not repeated
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The backgroundRepeat property return a String representing how a background-image is repeated.




PreviousNext

Related