Can someone explain GUIContent and GUIStyle?

I have a button which I create using

 [SerializeField] float width;
 [SerializeField] float height;
 [SerializeField] GUIContent content;
 [SerializeField] GUIStyle style;
 
 void OnGUI()
 {
     //GUI.Button(new Rect(Screen.width-width, Screen.height-height, width, height), content);
     GUI.Button(new Rect(Screen.width-width, Screen.height-height, width, height), content, style);
 }

I want the image to be the background of the button and the text to be on the center of the button.

Problem is that if I create the button using only content information, (the commented out line), it creates this black button with text in the middle and the image to the left of it. Which isn't what i want.

So, I searched online and found various sources telling me to use GUIStyle.

I set the style>normal>background to the image i want in the inspector. This replaced the whole button with the image, and the text from the content disappeared.

I know I can put the text in front of the button by GUI.Label but, i feel like i am missing something because if the style replaces/hides content, then there would be no point in the GUIButton requiring the content and style argument.

Can someone explain how this works?