How To Remove The Yellow Background From Google AdSense Ad

Remove The Yellow Background From Google AdSense

How to remove the yellow background from Google AdSense, just before it loads? If you are displaying Google AdSense on your blog or website, you must have observed the light yellow color background that shows up just before AdSense loads.

Since Google AdSense codes are asynchronous, it doesnโ€™t load when your page content is loading. In a way, this is good because it doesnโ€™t slow down your page loading.

In case you missed: How To Improve The Page Speed Of Google AdSense Site

Why the yellow background before Ads shows up?

This is normal. The reason for the (yellow) background is simply that AdSense displays an ad that is smaller than the space you defined for this ad unit.

The background color is not coming from AdSense or any plugin your theme generates it. The โ€œtypicalโ€ yellow is the background color set by some of the standard WordPress themes for the <ins> tag. This tag is not very common, but AdSense loads the ad into this element.

But one disadvantage is, AdSense shows a light yellow color background, just before the AdSense ads loads. Here is an example. This is an image from my blog. You can see the light yellow background.


Here is another example. Google AdSense is displayed, but there is still the yellow color as a thin line. I didnโ€™t like that.


So, the question is, what could be the problem with that? Bloggers, Blog with the aim of earning some extra bucks from Google AdSense. Readers are getting smarter, they seem to know what are ads and what are actual links.

How to Remove The Yellow Background From Google AdSense

So, let’s get smarter, and remove the yellow background from Google AdSense.

In most of word press themes, there is the option to change the background color. But somehow it doesnโ€™t seem to apply to AdSense background.

We donโ€™t want to mess around with the style.css file. So the best and safest way to Remove the yellow background from Google AdSense Ad is to use custom CSS.ย 

Every word press theme has the option for custom/ additional CSS. Just copy and paste the following code in your themes custom CSS field, and save the settings. You are done, no more yellow background.

ins {

background: transparent;

text-decoration: none;

}

If the Above code (Custom CSS) does not work for your theme. You can also use this code.

ins.adsbygoogle { background: transparent !important; }

NOTE: You will not see the changes immediately. If you are using a caching plugin like WP super cache, delete the cache.

Delete your browser cache also. If you are using CDN services like Cloudflare page rules, you may also need to purge the cache. This is needed if you want to see the changes immediately.