View Overlaps when back button pressed in fragment

Question

In my app i have one activity and multiple fragments,From Activity A onCreate() i just show my HomeFragment and after user click events on my HomeFragment it moves to different fragment Like AboutFragment,Galleryfragment etc.

My problem is that when user move like ->HomeFragment -> AboutFragment ->GalleryFragment amd hen press virtual back button then view of GalleryFragment and AboutFragment overlaps each other.

I am using following code when move between fragment-

    FragmentTransaction ft = fragmentManager.beginTransaction();
    Fragment mFragment = new AboutFragment();
    ft.replace(R.id.content_frame, mFragment);
    ft.addToBackStack(null);
    ft.commit();

So how can i solve this issue.

and i saw following eror in logcate-

 FATAL EXCEPTION: main
 java.lang.IllegalStateException: Fragment already added: AboutFragment{41c8a878 #0 id=0x7f07003d}
 at android.support.v4.app.FragmentManagerImpl.addFragment(FragmentManager.java:1175)
 at android.support.v4.app.BackStackRecord.popFromBackStack(BackStackRecord.java:722)
 at android.support.v4.app.FragmentManagerImpl.popBackStackState(FragmentManager.java:1516)

EDIT:

my onCreateView of AboutFragment is-

          @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
             View view = inflater.inflate(R.layout.aboutview, container,false);
             aboutView = (TextView) view.findViewById(R.id.about_textview);
             return view;
          }

thanks in advance.