![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/02\/classic-icon-2.png\"){kind=icon}
<\/figure>\n\n\n\nClassic – a solid color or image<\/p>\n\n\n\n Gradient- a mix of two colors blending into one another<\/p>\n\n\n\n Video- link to a video clip<\/p>\n\n\n\n Slideshow- a series of images<\/p>\n\n\n\n After you select your background, you can add HOVER<\/strong> effects<\/a> to animate the background when visitors mouse over it.<\/p>\n\n\n\n The Classic background has one color or image. To use a color, either use the color picker<\/a> or use a global color<\/a>.<\/p>\n\n\n\n To use an image, click the graphic field<\/a>. Then choose among a number of image options.<\/p>\n\n\n\n Learn more about background image size and position<\/a>.<\/p>\n\n\n\n You can:<\/p>\n\n\n\n Adding mouse effects will make you background react to users mousing over it<\/a>.<\/p>\n\n\n\n A gradient background combines two colors that blend into one another. <\/p>\n\n\n\n Choose the two colors using either the color picker<\/a> or global color<\/a>.<\/p>\n\n\n\n Location<\/strong> determines where each of the colors will start to fade. The default setting is that the first color is set to 0 and the second color is set to 100. This means the first color starts at the top of the element at its strongest hue and fades out around halfway down the element. The second color starts at the bottom and fades out around halfway up. <\/p>\n\n\n\n Type <\/strong>allows you to choose between Linear<\/strong> and Radial<\/strong>. <\/p>\n\n\n\n Linear<\/strong> will have the colors divided horizontally or vertically. The Angle <\/strong>determines whether the colors divide horizontally or vertically. The default setting is 180 which means the colors are divided by a straight line running horizontally across the element. <\/p>\n\n\n\n Radial<\/strong> will have Color 1 radiating out from the center of the element. Position <\/strong> sets the point where the color radiates out from. Choose Vertical<\/a><\/strong>, Horizontal<\/a><\/strong>, Transparent<\/a><\/strong>, Blur<\/a><\/strong> and\/or Scaling<\/a><\/strong> to add scrolling effects.<\/p>\n\n\n\n You can also add Vertical<\/a>, Horizontal<\/a>, Transparent<\/a>, Blur<\/a> and Scaling<\/a> scrolling effects.<\/p>\n\n\n\n![\"Gradient](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/02\/Gradient-icon.png\"){kind=icon}
<\/figure>\n\n\n\n![\"Video](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/02\/video-icon.png\"){kind=icon}
<\/figure>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/02\/Slideshow-icon.png\"){kind=icon}
<\/figure>\n\n\n\nClassic<\/h2>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/02\/Background-Classic.png\")
<\/figure>\n\n\n\n\n
Gradient<\/h2>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/02\/Background-Gradient.png\")
<\/figure>\n\n\n\nVideo<\/h2>\n\n\n\n