For example, the markup of a p element with a background image will change from: Note: The aa111bb22-cc-33-ee-44ffgg55 string is a specific hash that corresponds to the CSS selector. Once the image is successfully loaded, the HTML element will include the data-rocket-lazy-bg-aa111bb22-cc-33-ee-44ffgg55="loaded" attribute. In the following GIF, you can see how the Stroke-Report-Brochure.webp image is loaded only after scrolling down the page:Īdditionally, a page with a background image(s) will have the following changes in its markup. As you scroll down the page, the background image will be loaded.In Chrome: View > Developer > Developer Tools Open the Developer Tools in your browser.After enabling the LazyLoad for CSS background images feature, open the page with the background image in an incognito window.You can see the LazyLoad for CSS background images in action using the Network tab from Developer Tools, as shown below: How to check if the feature is working Behavior of background images at Developer Tools > Network The LazyLoad for CSS background images feature behavior is complementary to the LazyLoad for images feature, which also targets background images, but for those applied to these specific HTML tags via inline style attributes. Using this feature will help you address the Defer offscreen images audit in Google Lighthouse-based tests, such as PageSpeed and GTmetrix. Background images of your site will be lazyloaded right upon feature activation. This feature is fully automated, which means you don't need to specify which images or CSS selectors need to be included. Background images added from a CSS file.Background images added via internal CSS.The LazyLoad for CSS background images feature targets two types of background images: You can enable this feature from the Media tab, in the LazyLoad section, as shown below: This helps the page to load faster because the background images will be loaded only when they need to be displayed. As of the 3.15 release, WP Rocket includes the LazyLoad for CSS background images feature, which is in charge of deferring the background images inserted via internal styles and CSS files. The function's result is an object of the data type, which is a special kind of. It's similar to gradient/radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions to cover its entire container, similar to gradient/repeating-linear-gradient(). Repeating-radial-gradient(): The repeating-radial-gradient() CSS function creates an image consisting of repeating gradients that radiate from an origin. It's similar to gradient/linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions to cover its entire container. Repeating-linear-gradient(): The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. The result of the conic-gradient() function is an object of the data type, which is a special kind of. Examples of conic gradients include pie charts and color wheels. Ĭonic-gradient(): The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Radial-gradient(): The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its result is an object of the data type, which is a special kind of. Linear-gradient(): The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. You can also create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions. There are three types of gradients: linear (created with the linear-gradient() function), radial (created with the radial-gradient() function), and conic (created with the conic-gradient() function). Use the background-image CSS property to declare gradients as a background. CSS gradients provide better control and performance over using an actual image file of a gradient that you can create using tools like Adobe Illustrator. A CSS gradient displays a smooth transition using two or more specified colors.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |