{"id":1279,"date":"2025-04-08T14:11:21","date_gmt":"2025-04-08T14:11:21","guid":{"rendered":"https:\/\/enblocks.com\/?post_type=docs&p=1279"},"modified":"2025-04-15T16:13:47","modified_gmt":"2025-04-15T16:13:47","slug":"background","status":"publish","type":"docs","link":"https:\/\/enblocks.com\/docs\/background\/","title":{"rendered":"Background"},"content":{"rendered":"\n

CSS background is a property used to set the background of an element, such as its color and image. You can define a solid color background or add image.<\/p>\n\n\n\n

Additionally, background extension offer options for gradient background colors, animated background colors, animated gradient background colors, and background video.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\n
\n

1. Background Color<\/h2>\n\n\n\n

It allows you to set a background color for an element and customize the hover background color for both the element itself and its parent div, providing interactive visual effects when the user hovers over either the child or parent element.<\/p>\n\n\n\n

\"Block<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

element background color with hover effect and parent hover effect.<\/strong><\/p>\n<\/div>\n\n\n\n

Preview of Background Color<\/em><\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
\n

2. Gradient Background Color<\/h2>\n\n\n\n

It offers the option to set gradient background colors, allowing you to define linear or radial gradients, choose from predefined gradients, or select your own colors from a color palette. Additionally, you can also define a hover gradient background color.<\/p>\n\n\n\n

\"Block<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

element Gradient Background Color with hover effect<\/strong><\/p>\n<\/div>\n\n\n\n

Preview of Gradient Background Color<\/em><\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
\n

3. Animated Background Color<\/h2>\n\n\n\n

Animated background color allows you to create dynamic transitions between colors, providing an engaging and visually appealing effect that changes over time.<\/p>\n\n\n\n

\"Block<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

Animated Background Color<\/strong><\/p>\n

<\/div><\/div>\n\n\n\n

Preview of Animated Background Color<\/em><\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
\n

4. Animated Gradient Background Color<\/h2>\n\n\n\n

Animated gradient background color creates a smooth, dynamic transition between multiple colors, giving your website a visually captivating effect that shifts over time.<\/p>\n\n\n\n

\"Block<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

Animated Gradient Background Color<\/strong><\/p>\n

<\/div><\/div>\n\n\n\n

Preview of Animated Gradient Background Color<\/em><\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
\n

5. Background Image<\/h2>\n\n\n\n

Background image allows you to set an image as the background, and it also supports overlay color and overlay gradient color, providing additional styling options for enhanced visual effects.<\/p>\n\n\n\n

\"Block<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

Background Image with Overlay Gradient Color<\/strong><\/p>\n<\/div>\n\n\n\n

Preview of Background Image<\/em><\/em><\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
\n

6. Background Video<\/h2>\n\n\n\n

Background video enables you to set a video as the background of an element, adding a dynamic and engaging visual experience to your website.<\/p>\n\n\n\n

\"Block<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

Background Video<\/strong> with Overlay Gradient Color<\/strong><\/p>\n

Preview of Background Video<\/em><\/em><\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n<\/div>\n","protected":false},"template":"","categories":[15],"class_list":["post-1279","docs","type-docs","status-publish","hentry","category-components"],"acf":[],"_links":{"self":[{"href":"https:\/\/enblocks.com\/wp-json\/wp\/v2\/docs\/1279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/enblocks.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/enblocks.com\/wp-json\/wp\/v2\/types\/docs"}],"wp:attachment":[{"href":"https:\/\/enblocks.com\/wp-json\/wp\/v2\/media?parent=1279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/enblocks.com\/wp-json\/wp\/v2\/categories?post=1279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}