1. Home

HTML DOM Style background Property

Style the background of a document

Definition and Usage

The background property sets or returns up to eight separate background properties, in a shorthand form.

With this property, you can set/return one or more of the following (in any order):

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-size
  • background-origin
  • background-clip

    • The properties above can also be set with separate style properties. The use of separate properties is highly recommended for non-advanced authors for better controllability.

    Browser Support

    The numbers in the table specify the first browser version that fully supports the property.

    Property
    background 1.0 4.0 1.0 1.0 3.5
    Note: See individual browser support for each value below.

    Syntax

    Return the background property:

    object.style.background

    Set the background property:

    object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

    Property Values

    Value Description
    color Sets the background color of an element
    image Sets the background image for an element
    repeat Sets how a background image will be repeated
    attachment Sets whether a background image is fixed or scrolls with the page
    position Sets the starting position of a background image
    size Sets the size of a background image
    origin Sets the background positioning area
    clip Sets the painting area of a background image
    initial Sets this property to its default value. Read about initial
    inherit Inherits this property from its parent element. Read about inherit

    Technical Details

    Default Value: transparent none repeat scroll 0% 0% auto padding-box border-box
    Return Value: A String, representing the background of an element
    CSS Version CSS1 + new properties in CSS3

    More Examples

    Example

    Change the background of a DIV element:

    document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

    Example

    Set a background color for a document:

    document.body.style.backgroundColor = "red";

    Example

    Set a background image for a document:

    document.body.style.backgroundImage = "url('img_tree.png')";

    Example

    Set a background-image to no-repeat:

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

    Example

    Set the background-image to be fixed (will not scroll):

    document.body.style.backgroundAttachment = "fixed";

    Example

    Change the position of a background-image:

    document.body.style.backgroundPosition = "top right";

    Example

    Return the background property values of a document:

    document.body.style.background;

    Related Pages

    CSS tutorial: CSS Background

    CSS3 tutorial: CSS3 Backgrounds

    CSS reference: background property

    Categories

    HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

    Contact US