Text background appearing white when published post - Fix it


There are thousands of people out there using blogger templates with black post background and post editor we have got at blogger uses inline CSS style for applying styles to text or any elements, let's try to find why these makes the text background white sometimes which usually looks like a white bar.
That's a problem to many people, often to those who use post background color other than white. And it doesn't mean that having black or other color background causes this, but the problem list is multiple and solutions are also different.
So read through the whole post to get it fixed correctly, the reasons of this problem has been divided into different section with their solution, so far i have found only two reasons of this problem, but i am sure that there are not more.

Copying text from other sites or Word Processing software

This is one of the most common issue, many Blogger don't understand what it can cause when copying from other site or a word processing application like MS Word. The cause of the white background is usually because when you copy the text from other website page, the background format of that webpage will be also copied along with the text and will be applied when you paste it in Blogger Post editor or any WYSIWYG editor.It's the same when you copy text from a rich text editor like MS Word or Wordpad, but along with the display format it also copies the excessive coding of the MS Word text, which is not compatible with ideal web page.
Fixing it : There's only one way to stop this, suppose if you have some text on other site that you need to post it on your blog, when you copy the text, it also carries the customization with it. To prevent it from being carried you have to first copy the Text from the website or MS Word. Now open a plain text editor, Notepad is a common one, paste the text into it now copy the text from Notepad (plain text editor) and then paste the Text into Blogger post editor, that will prevent the system from carrying the customization.
It's like Copy from Website - Paste into Notepad - Copy from Notepad - Paste into Blogger Post Editor. Notepad here works like a filter, which turns the rich text into plain text.

Putting white background on text in Post Editor

This is much a confusion, when editing the post in the Post Editor you are distracted by the Post editor interface and you assume that the blog post background is white as in the post editor. When in the post editor you get lots of customization options in which 'text background color' is one. Imagine, you want to change the text color and instead of selecting the text color option from customization bar you select the text background option by mistake and then what you see is background color on your text, then to remove the background color you select white from the text background option. And that's where you make the mistake, you didn't remember that you had black background on post in your blog and the text are going to be white but you have set the text background in the post editor to white !
So, now you may have understand what's that causing it, i am also going to list the fixes for it so you can make it like the way it should be.


Fixing it : The text or any element in the post editor is styled with inline CSS styles, so you have to delete the inline CSS styles which has white background, you can easily detect which text is having white background. You can find it by switching to HTML mode and there you will see the HTML of your post body. For example this is the HTML
<span style="background-color: white;">I AM A BLOGGER</span>
You can clearly see the inline CSS (highlighted in yellow), removing it will fix the white background problem or so called white bar problem.
Preventing it : This usually happens when you mistakenly give select the text background color instead of the text color and to revert the text background color to it's previous state you select the white from the option, but that's not clean at all. You must use CTRL+Z or the Undo option on the customization bar in Blogger Post Editor.
Hope you will keep this mind and next time you have the solution. Best of luck with Blogging.