How to smoothly transition CSS background images using jQuery? Last Updated : 12 May, 2021 Comments Improve Suggest changes Like Article Like Report In this article, we will learn to implement a smooth transition of background images using jQuery and CSS. Approach: First, we add a transparent background image using the background-image property in CSS in the style tag. background-image: url(white.jpg); For the transition background image, we use the transition property in CSS and add a transition to the background image in the style tag.transition: background-image 3s; In the script section, we create an image object and add the source of the image that needs to be transitioned. On image load, we call a function that adds background-image using the css() method in JQuery. JavaScript Code snippet: var image = new Image(); // Image for transition image.src = "geek.png"; image.onload = function () { $(".element").css("background-image", "url('" + image.src + "')"); }; Example:Below is the full implementation of the above approach. HTML <!DOCTYPE html> <html> <head> <!-- JQuery CDN --> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <style> body { width: 100%; height: 100%; } .element { background-image: url( https://media.geeksforgeeks.org/wp-content/uploads/20210507170406/white.jpg); width: 60%; height: 100%; padding: 200px; background-repeat: no-repeat; transition: background-image 3s; } </style> </head> <body> <div class="element"></div> <script> var image = new Image(); // Image for transition image.src = "https://media.geeksforgeeks.org/wp-content/uploads/20210507170600/gfg1-300x67.png"; image.onload = function () { $(".element").css("background-image", "url('" + image.src + "')"); }; </script> </body> </html> Output: Smooth transition Comment More infoAdvertise with us Next Article How to smoothly transition CSS background images using jQuery? N nikhilchhipa9 Follow Improve Article Tags : Web Technologies JQuery jQuery-HTML/CSS Similar Reads How to Set background Image using jQuery css() Method ? This article will show you how to set the background image using jQuery. To set the background image, we are using the jQuery css() method. jQuery css() MethodThis method sets/returns one or more style properties for the specified elements. Syntax: Return a CSS property:$(selector).css("propertyname 2 min read How to change the background image using jQuery ? To change the background image using jQuery, you can use the jQuery CSS() method. For this, the whole property value is specified using the url() functional notation. Approach: Suppose we have an image URL stored in a variable and then use css() method to change the value of background image. Below 2 min read How to transform background image using CSS3 ? In this article we will learn how to transform a background image using CSS3, The transform property in CSS is used to transform the background image. In Approach: The CSS transform property is used to apply the two-dimensional or three-dimensional transformation to an element. The transform propert 1 min read How to change the position of background image using jQuery ? In this article, we will see how to change the position of the background image using jQuery. To change the position of the background image, we will use css() method with float property. The css() method is used to change the style property of the selected element. The float property is used to cha 2 min read How to Change Background Images on Scroll using CSS? Background images are crucial in web development, significantly enhancing the user experience. Using background images on a webpage can effectively showcase a brand or convey specific messages. Here, we will explore how to change background images on scroll using CSS. ApproachThe HTML includes a spa 2 min read How to Add filter to the background image using CSS? Adding filters to background images using CSS allows you to apply visual effects like blur, grayscale, brightness adjustment, and more without modifying the actual image file. CSS provides a set of filter functions that can be applied to elements with background images. This approach enhances design 3 min read How to Rotate Container Background Image using CSS ? Rotating a container's background image using CSS involves applying the transform: rotate() property to the container element. This rotates the entire element at a specified angle, including its background image, creating a dynamic, rotating visual effect on the web page's design.Approach: Using tra 2 min read How to Add Transition on Hover Using CSS? Transitions are the CSS technique used to create smooth changes between property values over a specified duration. By defining a transition, you can animate properties such as color, size, or position, making changes appear gradual rather than abrupt. For hover effects, transitions can enhance user 2 min read How to blur background image using CSS ? CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of a document written in HTML. In this article, we will learn how to blur background images using CSS, along with basic implementation examples. Blurring Background Images with CSSTo blur a background image usi 3 min read How to Make Z-Index Transition on Image using HTML & CSS ? By using the z-index property, CSS provides the ability to position elements above or below other elements. We can utilize the z-index property to create a seamless transition effect for elements when there is a change in the z-index value after a certain delay. This article will specifically focus 4 min read Like