There are two main types of elements in web markup: structural (block) and phrasal (inline). Block elements take up the entire available width and start on a new line — these are div, p, h1. Phrasal elements are built into the line and flow with the text — for example, span, em, strong, a.
Box Model is like a layered pie: the middle is the content, around it is a cushion (padding), then a crust (border), and on top there is air for neighbors (margin). If you set border-box, then all this together fits into one width.
img is a picture that is really important: it is visible in the text, it has a description (alt), search engines read it. background-image is purely decor: background, pattern, photo under the text. It is not considered part of the content, but simply creates a mood.