Title: CSS Background: Gradients
Last modified: May 8, 2017

---

# CSS Background: Gradients

 *  Resolved [Daniel Chase](https://wordpress.org/support/users/riseofweb/)
 * (@riseofweb)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-background-gradients/)
 * Thank you for spending the time to create this plugin. When attempting to implement
   this on my website, I ran into a problem.
 * Lazy loading gradient backgrounds is not necessary and it breaks the background
   from loading.
 * Example CSS3:
    `background:linear-gradient(90deg,rgba(130,130,130,0.95) 5%,rgba(
   255,255,255,0.95) 52%);`
 * Gradient backgrounds should be skipped by the plugin.
 * To see other gradient examples, visit: [https://www.w3schools.com/css/css3_gradients.asp](https://www.w3schools.com/css/css3_gradients.asp)
 * Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Thread Starter [Daniel Chase](https://wordpress.org/support/users/riseofweb/)
 * (@riseofweb)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-background-gradients/#post-9109733)
 * I have not tested this, but in the JS file where you are looping through all 
   elements, you could try using this:
 * Current:
    `if ($(this).css('background-image') !== 'none') {`
 * Possible solution:
    `if ($(this).css('background-image').indexOf('url') == -1){`
 *  Plugin Author [Radek Mezulanik](https://wordpress.org/support/users/zedna/)
 * (@zedna)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-background-gradients/#post-9111536)
 * Hi [@riseofweb](https://wordpress.org/support/users/riseofweb/),
    thanks for 
   your recommedation, i will implement it.
 * Regards
 *  Thread Starter [Daniel Chase](https://wordpress.org/support/users/riseofweb/)
 * (@riseofweb)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-background-gradients/#post-9115111)
 * Also I found that this is not compatible with Visual Composer, because they add`!
   important` to background images.
 * Solution:
    `this.style.setProperty( 'background-image', 'none', 'important' );``
   this.style.setProperty( 'background-image', bgbak, 'important' );`
 * After making this change to my JS file, I tested the lazy css background-image
   loading it works in Chrome, but not in FireFox or Internet Explorer. Looking 
   at the network waterfall Chrome downloads the background images in the lazy, 
   correct way. However, Internet Explorer 11 and FireFox (Latest version) loaded
   them at page load time and not lazily.
 * Does the background-image lazy loading work in all browsers?
 *  Plugin Author [Radek Mezulanik](https://wordpress.org/support/users/zedna/)
 * (@zedna)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-background-gradients/#post-9117242)
 * Hi [@riseofweb](https://wordpress.org/support/users/riseofweb/),
    i used `$(this).
   css('cssText', 'background-image: none !important');` and tested in the same 
   browsers as you mentioned. This solution seems working in all browsers you mentioned.
 * I tested image loading in page speed test services and i can see images in waterfall
   view, but when i make network tests in my browsers (Chrome&Firefox), i see getting
   image headers, but 0B is loaded. I´m not sure, that i can fully trust web services
   for testing this plugin. What do you think about it?
 * Thanks

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘CSS Background: Gradients’ is closed to new replies.

 * ![](https://ps.w.org/wp-image-lazy-load/assets/icon-256x256.png?rev=1328202)
 * [Zedna WP Image Lazy Load](https://wordpress.org/plugins/wp-image-lazy-load/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-image-lazy-load/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-image-lazy-load/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-image-lazy-load/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-image-lazy-load/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-image-lazy-load/reviews/)

## Tags

 * ["background-image"](https://wordpress.org/support/topic-tag/background-image/)
 * [css](https://wordpress.org/support/topic-tag/css/)

 * 4 replies
 * 2 participants
 * Last reply from: [Radek Mezulanik](https://wordpress.org/support/users/zedna/)
 * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/css-background-gradients/#post-9117242)
 * Status: resolved