The backgroundPosition property is used for setting or getting the initial position for the background image of an element relative to the origin.SyntaxFollowing is the syntax for −Setting the backgroundPosition property −object.style.backgroundPosition = valueValuesFollowing are the values −ValueDescriptiontop lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightThe positioning can be understood by their name. If you write only one value then the other will always be center.xpos yposTo indicate the horizontal(x) and vertical position(y). It starts from top left corner with 0, 0. Pixels are preferred as units although you can use any other CSS unit too.x% y%To specify the ... Read More

The background-origin property is used to set or get the background origin i.e. its relative position. It can be relative to any of the four box model areas.SyntaxFollowing is the syntax for −Setting the backgroundOrigin property −object.style.backgroundOrigin = "padding-box|border-box|content-box|initial|inherit"ValuesThe above property values are explained as follows −Sr.NoValue & Description1padding-boxFor having the background image positioned relative to the padding box.It is the default value.Default value. The background image is positioned relative to the padding box.2border-boxFor having the background image positioned relative to border box.3content-boxTo have background image positioned relative to content box.4initialFor setting this property to initial value.5inheritTo inherit the parent ... Read More

The backgroundImage property is used for setting or returning a background image for an element.SyntaxFollowing is the syntax for −Setting the backgroundImage property:object.style.backgroundImage = "url('URL')|none|initial|inherit"ValuesThe above property values are explained as follows −Sr.NoValues & Description1url('URL')For specifying the image file location.2noneFor specifying no background image to be used and it is the default value.3initialFor setting this property to initial value.4inheritTo inherit the parent property value.ExampleLet us look at the example for the backgroundImage property −    #DIV1 {       height: 300px;       width: 500px;       background-image: url("https://www.tutorialspoint.com/mongodb/images/mongodb-minilogo.jpg");       background-repeat: no-repeat; ... Read More

The backgroundColor property is used for setting or returning background color for an element. We can specify values by standard names, rgb(), rgba(), hsl() or hsla().SyntaxFollowing is the syntax for −Setting the backgroundColor property −object.style.backgroundColor = "color|transparentValuesThe above property values are explained as follows −Sr.NoValue & Description1ColorFor specifying the background color.2TransparentSets the background color to transparent i.e the underlying content can be seen. It is the default value.ExampleLet us look at the example for the backgroundColor property −Live Demo    #DIV1{       background-color: rgba(10, 122, 102, 0.1);    }    function changeBackColor(){   ... Read More

The backgroundClip property lets us control how far the background image will be painted i.e. the painting area of the background image. It is used for setting or returning that painting area.SyntaxFollowing is the syntax for −Setting the backgroundClip property −background-clip: border-box | padding-box | content-boxValuesFollowing are the values −Sr.NoValue & Description1border-boxThis clips the background within the border-box and this is the default value.2padding-boxThis clips the background within the padding box.3content-boxThe background is clipped within the content box.ExampleLet us look at an example for the backgroundclip property −    #one {       box-shadow: 0 0 ... Read More

The backgroundAttachment property is used to set or get if the background image should scroll with respect to the page content or not.SyntaxFollowing is the syntax for −Setting the backgroundAttachment property −object.style.backgroundAttachment = "scroll|fixed|local|initial|inherit"ValuesFollowing are the values −Sr.NoValue & Description1ScrollThis is the default value and it makes the background scroll with the image.2FixedThis fixes the background with regard to the viewport.3LocalTo make the background scroll along with the element's contents.4InitialFor setting this property to initial value.5inheritTo inherit the parent property value.ExampleLet us look at the example for the backgroundAttachment property −    body {       ... Read More

The background property is used for setting or getting the background image associated with an element. It is a shorthand property and can manipulate upto 8 properties.SyntaxFollowing is the syntax for −Setting the background property −object.style.background = "color image repeat attachment position size origin clip|initial|inherit"ValuesFollowing are the values −Sr.NoValue & Description1colorFor setting an element background color.2imageFor setting an element background image.3repeatFor setting how the background image will be repeated.4attachmentFor setting the background image at fixed or scrolls with the page.5positionFor setting the background image starting position.6sizeFor setting the background image size.7originFor specifying the background positioning area.8clipFor setting how far the ... Read More

The backfaceVisibility property is used to specify whether the back face of an element will be visible or not when faced by the user. It is important only for 3D transforms so that when you rotate the element you want to see its backside or not.SyntaxFollowing is the syntax for −Setting the backfaceVisibility property −object.style.backfaceVisibility = "visible|hidden|initial|inherit"ValuesFollowing are the values −Sr.NoValue & Description1visibleThis makes the backside visible and is the default value.2hiddenThis hides the backside.3InitialFor setting this property to initial value.4inheritTo inherit the parent property value.ExampleLet us look at an example for the backfaceVisibility property −Live Demo ... Read More

The animationTimingFunction is used to specify the way animation progresses during its cycle. It does so by setting or returning the speed curve for an animation. The speed curve defines how smooth the transitions will be by specifying the time it takes animation to move from one state to another.SyntaxFollowing is the syntax for −Setting the animationTimingFunction property −object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"ValuesFollowing are the values −Sr.NoValues & Description1linearThis specifies that the animation has the same speed throughout the course of an animation.2easeThis is the default value specifying the animation has a slow start and end but is faster ... Read More

The animationPlayState property is used for setting or getting the animation state whether it is running or paused. This is useful in toggling animations.SyntaxFollowing is the syntax forSetting the animationPlayState property −object.style.animationPlayState = "running|paused|initial|inherit"ValuesFollowing are the values −Sr.NoValues & Description1RunningIt specifies that the animation is currently running and is the default value.2PausedFor specifying the animation is paused.3InitialFor setting this property to initial value.4inheritTo inherit the parent property value.ExampleLet us look at an example for the animationPlayState property −Live Demo    div {       width: 70px;       height: 30px;       border: 3px ... Read More