# How to Add a Background Image in HTML: Methods, Properties, and What to Consider Adding a background image to an HTML page sounds straightforward — and in many cases it is. But the method you use, and how you control that image, depends on what you're trying to achieve. A full-page hero background behaves differently from a section-level texture, and inline styling is a very different tool from an external stylesheet. Here's how it all works. ## The Two Core Approaches There are two main ways to apply a background image in HTML: 1. **CSS `background-image` property** (the standard, recommended approach) 2. **Inline `style` attribute** (quick, but limited in flexibility) Both ultimately use CSS — HTML itself has no native background image tag for modern development. The old `background` attribute on `` was deprecated in HTML5 and should not be used in new projects. ## Using CSS to Set a Background Image ### External or Internal Stylesheet The cleanest and most maintainable method is to use a CSS rule targeting the element you want. For a full-page background: ```css body { background-image: url('your-image.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } ``` This can go inside a `