0,00 $

No products in the cart.

Home » WordPress and Blogging » WordPress Tutorials » Speed Optimization » How to Prevent Background Images from Fading in in TagDiv Newspaper Theme
0,00 $

No products in the cart.

How to Prevent Background Images from Fading in in TagDiv Newspaper Theme

I found this solution in TagDiv's Newspaper theme support section. I wrote this post with version 10.4. TagDiv composer has a checkbox to avoid fading in background images, but I found it didn't work. Here's what worked for me. Hopefully, it will save you some time and, hopefully, TagDiv will make this post absolutely obsolete in the future!

& You May Like:

Currently Reading

Nine Nasty Words

0
(0)

How to prevent Newspaper Theme Background Image Fade to improve Longest Contentful Paint (LCP) times.

If you use the Newspaper theme, and you use sections with background images, you’ll likely note that the theme adds a fade-in effect to those background images. And do it if you’ve checked a box in TagDiv composer seemingly offering you the chance to avoid this irritating behavior.

Prevent Newspaper theme background image fade in
This chalkboard background image from TryitSpace.com, in a TagDiv Newspaper theme row, being the largest image on the page, was what speed tests were considering the Largest Contentful Paint (LCP). And it looked VERY weird when everything, including the white text loaded first and then the background faded in. Using the code below and excluding the image from lazyload solved this issue (though I may get rid of the large header area altogether).

Why irritating? A minor reason is that (at least in my opinion) the Newspaper theme background image fade in effect looks weird to visitors. Everything else loads, including the text and THEN that image at the top of your page fades in. But, most importantly, I found that it was making a significant impact on my Longest Contentful Paint (LCP) times, which is one of the “Core Web Vitals” that Google has announced they’ll be considering in ranking factors.

How to Prevent Newspaper Theme Background Image Fade In

After a LOT of searching, I found this snippet that worked for me to solve this issue:

<style>
.td-element-style-before {
transition: none!important;
-webkit-transition: none!important;
opacity: 1!important;
}
</style>

Basically, it’s stopping the transition effect on those background images and making them fully opaque from the get-go.

This is where you put this code:

Prevent Newspaper Theme Background Image Fade In where to put the code in TagDiv Newspaper theme panel

Since I’m talking about this, though, (and I’ll probably mention this elsewhere). If you do have a large hero or header image and you’re using lazy loading, you might want to add that specific image to your “do not lazyload” list in whatever plugin you’re using. WP Rocket, for instance, has a “do not lazyload” area in their image optimization section.

You’d think that images at the top of the page wouldn’t get lazyloaded. However, I found that some background images, in fact, were. So excluding them from lazyload did help improve LCP times somewhat.

Here's how to prevent background image fade-in in the Newspaper theme to perhaps improve your LCP time. Click to Tweet

How many hot cups of coffee does this post or page deserve?

Click on an icon to rate it. If this is a review post, you might find a widget to rate the item itself at the beginning of the post. If this is a product, please leave your product rating under the review tab.

Average rating: 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

As you found this post useful...

Why not share it?

We are sorry that you found this post to be like a weak cup of decaf.

Let us improve this post!

Tell us how we can improve this post?

Get Notifications by Email

Sign up for our email newsletter and keep up to date on new additions to our website.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Share this
0
Hi there. While you're here, care to comment?x
()
x
Send this to a friend