My Blog

The background-image property specifies background images for elements. There can be used one or more images. By default, a background-image is vertically and horizontally repeated and placed at the top-left corner of the element. The background of an element is the total size of it including padding and border (not margin). If the image is unavailable, you need to specify a background-color. Initial Value none…

CSS background-color property sets an element background color. The background of an element is the total size of it which includes padding and border (but not the margin). So, for setting a background color you need to choose any color. You can choose colors from our Color Picker tool. The color can be written like the following types: a color name – “red”,…

CSS background-clip property specifies how far the background-color and background-image should be from the element. If the element has no background-image or background-color, this property will only have a visual effect when the border has transparent regions or partially opaque regions, otherwise, the border shows the difference. The background-clip property is one of the CSS3 properties. For clipping a background to a text there is also a…

The background-blend-mode is a CSS property which defines the blending of the background images with each other and with the background-color. It has 10 values: normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity. The default value is normal. If there are several background layers and they have a specified list of blend modes, background-blend-mode should be applied in the same…

The background-attachment property defines if the background-image is fixed or it will scroll along with the rest of the page. Background-attachment has three values: fixed, scroll and local. When the “scroll” value is set, the background-image will scroll with the page. This is the default value. When the “fixed” value is applied, the background-image will remain fixed to the viewport. Even if an element…

The CSS background is a shorthand used to set all background style properties. Background property includes the following properties: If one of the properties in the background shorthand property is background-size, a slash should be used for separating it from background-position. When several background-image sources are used but background-color is also needed, it should be last in…

The backface-visibility is a CSS property which defines whether the back face of an element should be visible or not. The back face of an element is a mirror image of the front. If the element is rotated, you can choose to show the back face of an element to the user or not. Two values specify…

The appearance property displays an element using a platform-native styling based on the users’ operating system’s theme. The -moz-appearance property is used in Gecko (Firefox) to show an element using platform-native styling based on the operating system’s theme. The -webkit-appearance property is a proprietary CSS extension that is supported by the WebKit browser engine. WebKit extensions contain the -webkit- prefix indicating that it…

The animation-timing-function property defines how the animation will progress over the duration of each cycle, not throughout the whole of the animation. It specifies the animation’s speed curve defining the time which is needed for an animation to change from one style set to another. Timing functions can be specified on certain keyframes in the @keyframes rule. If there…

CSS animation-play-state property specifies if the animation is running or it is paused. If you resume a paused animation it will start from where it was left off at the time it was paused, rather than starting from the beginning of the animation sequence. Also, you can run the animation from paused state. When multiple comma-separated values…