Easily remove AdSense yellow background and change to transparent [2 methods]

You can install a plugin or adjust the CSS styling sheet with the piece of snippet code to hide or remove Google AdSense yellow background on your site to improve CTR and potential earning.

The Google Ads yellow background color is not an issue with AdSense but is due to the default nature of WordPress theme. In this article, I’ve described the exact solution on how to get rid of AdSense yellow background to change it to transparent.

Google AdSense is undoubtedly the most powerful online earning service provider. The Google Ads, when used in the right amount with correct Ad sizes and placement, can fetch you very high profits.

But if the ad units stand out from the rest page then it looks a little indistinct to the readers. Hence, it is always important that the readers should be appealed with a good mix of content and ads.

Why Google AdSense yellow background?

Generally, the yellow hex color you see on Google ads border is due to responsive ad units sizes. Google’s Ads algorithm will show a smaller ad size on a regular ad unit if the Advertisement is of high CPC revenue.

This gives the ad a very abstract look as compared to all other elements of your site. But, this will result in low CTR (Click Through Rate) and we end up with low earning potential.

Google AdSense yellow background

 

To get high CTR or to camouflage the ad with our website design, it is recommended to make the ad background transparent. This further encourages the reader to positively click the interest-based ads.

Method 1. Using a WordPress Plugin for Google Ads Transparent

You can make the Ad border transparent without any code using a simple WordPress Plugin known as Advanced Ads. The plugin will automatically add the CSS code while loading the page and henceforth we do not need to manually edit the custom CSS script.

  1. Download and Install the plugin from the WordPress repository from your WP dashboard
  2. Open the Plugin — Advanced Ads
  3. Go to Settings tab and lookup for AdSense option
  4. Check for the options called Transparent background
  5. Enable the checkbox

And now reload your page to see the background of your AdSense ads, hopefully, it will now be transparent after clearing browser cache.

Method 2. Changing the CSS Code or Change Ads Background

If you carefully lookup in inspect element developer options, you will see the Google places a “ins” tag around its Ads and many WordPress themes use a standard light yellow background color for “ins” tags.

What you can do any of the following:

  1. Go to WordPress Dashboard → Appearance → CSS Editor/Editor.
  2. Open your style.css and do a page search using Ctrl+F for #fff9c0 or #ff9 for yellow color (vary with WordPress Theme).
  3. Here change the color code according to your website’s background such as #ffffff for white, #000000 for black, or RBG(25,25,25,0) for transparent etc.

If you can’t find anything matching after a search, then add the following code according to your need in the custom stylesheet. But before you make any changes, do not forget to take a backup. If anything breaks while modifying the stylesheet, you can simply revert back to the original.

For transparent background

ins.adsbygoogle { 
background: transparent !important; 
}

For white background

.adsbygoogle {
background: #FFFFFF;
}

For any background color

.adsbygoogle {
background: #HEXVALUE;
}

Replace #HEXVALUE color with your website or blogs content background color to mix and match the advert with content.

Conclusion:

You can use either of the methods that you’re comfortable or technically possible. Both methods will actually help in removing or hiding the AdSense yellow background or even change it to your desired color to increase the CTR and potential earnings from AdSense.

If you an Android app and using AdSense then we also have a list of best Admob alternatives that you can consider to monetize the app.

I hope the post was helpful. Do comment below for any assistance or support if needed. Cheers!

If you've any thoughts on Easily remove AdSense yellow background and change to transparent [2 methods], then feel free to drop in below comment box. Also, please subscribe to our restoreBin YouTube channel for amazing videos tips. Cheers!

Share

2 Responses

  1. Monir Hasan says:

    Thanks for your information. After a long, I got your working tips. Good Job Man.

Leave a Reply

Your email address will not be published. Required fields are marked *