How to Add an Image & Background Image in HTML

Did you know that people remember only 20% of what they read but 80% of what they see? People learn and process information better visually — which is why using images on your website is critical. That's where learning how to use HTML background img code comes into the picture. (Pun intended.) 

Today, I'm going to walk you through everything you need to know about adding an image (or a background image) in HTML. You'll learn how to use HTML background img code, as well as why imagery is a must-have. 

Why use imagery on your site? 

65% of the population are visual learners. If you're not making use of images on your site, you're not offering content that speaks to a majority of folks.

Pictures help make your content more informative, engaging, and memorable. There's also the digestibility aspect: If you add imagery such as an infographic, dense content becomes easier to understand. In addition to improving the user experience, they can also help boost your organic search traffic.

How to Add Imagery with a Site Building Platform

If you use a website-building platform like Content Hub or WordPress, just click the image icon in your toolbar, select an image from your file manager, and insert it. This process is straightforward and shouldn't take more than a few minutes. Because a tool like Content Hub offers drag-and-drop building, you do not need to know HTML.

That being said, if you aren't using a builder, adding an image to your site is still possible. However, you'll have to make use of HTML to do so.  I'll walk you through that process now. 

The syntax looks like this: <img src=“URL” alt=“descriptive text”>

The HTML image element is an “empty element,” meaning it does not have a closing tag. Unlike elements like paragraphs that consist of an opening and a closing tag with content in between, an image specifies its content with attributes in the opening tag.

Here, take a look at these lines of code to see the difference between a paragraph and image. 

Did you notice the two attributes in the image element above, src and alt? I will walk you through both of these important attributes next. This video dives deeper into the steps we just explained, so if you prefer to learn that way, you're welcome to follow along in the video. 

The img src Attribute

An image element must always have a src (source) attribute containing the image URL or file path. If this is missing, the browser won't know what to render.

The types of permitted image files depend on the browser. However, all browsers allow you to place standard formats like .jpeg, .png, and .gif, as well as .svg.

In the code example above, the source is a full hyperlink because the image is being fetched from another website. If you want to place an image stored on your server, you can use the image file path without the website name or protocol.

For example, if the image is located in a subfolder stored in the same place as your HTML file, your image element can look more like this.

In this case, “csz” would be a folder located in the same directory as your HTML file.

The img alt Attribute

While a browser can render an image without the alt attribute, including this attribute is a must, in my opinion. That’s because this attribute contains image alt text.

Image alt text is important for a few reasons. First, it will appear in place of an image if the image fails to load on a user’s screen. Second, it helps screen-reading tools describe images to readers with visual impairments who might have trouble understanding the image without it. Creating a site that's accessible to all — including folks with blindness and low vision — is the right thing to do. Plus, it's good for your organization. 

Third, image alt text allows search engines to better crawl and rank your website. Google Images — not Google Search, Google Image Search — is a major search engine on its own, and another way people can find your website.

Providing images with descriptive alt text can help you rank for your target keywords and drive traffic to your site. In 2019, HubSpot did exactly that, leading to a 25% year-over-year growth in organic traffic that came from web and image searches.

The img style Attribute

You might also see a style attribute inside an <img> tag containing the width and height of the image. Specifying the width and height can help prevent the web page from flickering while the image loads. Here’s how the code might look with these additional attributes.

Output

It’s important to note that you can also specify the size of an image using internal or external CSS, over inline CSS. To learn the difference between these three types of CSS, see our guide on adding CSS to HTML.

The img width and height Attributes

The width and height of an image can also be specified in pixels with separate width and height attributes, like so this.

This will produce the same result as the image above, where the style attribute was used.

The main difference between these methods is that using separate width and style attributes will tell the browser how much space to save for the image, which may result in smoother loading (though this will depend on your page layout, ultimately).

How to Insert a Background Image in HTML

If you’d like to set an image as the background of a web page or an HTML element, rather than simply inserting the image onto the page, you’ll need to use the CSS background-image property. By using this property, you are able to specify what background image you want to appear on your website. 

This CSS property replaced the background-image attribute in previous versions of HTML. It’s much more flexible and predictable than the HTML attribute — and still easy to use. Therefore, instead of the traditional HTML background img code, I'd encourage you to use CSS. 

To set the value of background-image, you have to use the following syntax:

url(‘ ’);

Between the single quotation marks, you’ll put the image URL or file path.

How to Insert a Background Image on a Page

Say you want to set an image as the entire page's background. In this case, you would apply CSS to the body element. Using a CSS selector, you can define the background-image property in the head section of your HTML file or an external stylesheet.

For this demo, I'll show you how to do so using the same image as above. I'll also change the text color to white so we can see it.

Here’s the HTML and CSS.

Here’s the result. 

Output

You're doing a great job — give yourself a pat on the back!

I also want to share with you what happens when the image is smaller than the browser. In that case, it displays on multiple tiles. This is what you can expect to see.

Output

To prevent this from happening, you can use the background-repeat property and set it to no-repeat.

Here’s the CSS.

The HTML stays the same. Here’s how it would look on the front end now.

You’ve solved the repeating problem, but now you have a lot of extra whitespace below and to the right of the image. To ensure the background image covers the entire body element — or, in other words, takes up the entire browser window — you can use the background-size property and set it to cover.

Then, to prevent the image from warping its dimensions, use the background-attachment property and set it to fixed. That way, the image will keep its original proportions.

Here’s the CSS.

The HTML stays the same. Here's how it would look on the front end now.

Output

How to Insert a Background Image on an HTML Element

You can also set an image as the background of an HTML element rather than the entire web page.

For example, you could place HTML elements inside a div, then target the div with the CSS properties we used above. One difference is that instead of setting the background-size property to cover, we’re going to set it to 100% 100%.

That means the image will stretch horizontally and vertically as needed to fit the entire div element, without retaining its original dimensions.

Here’s the CSS and HTML.

Here’s the result.

Output

When to Use CSS vs HTML to Add a Background Image

You might be wondering: So, if I can use HTML or CSS to add a background image, how do I decide when to use which? I'm here to help walk you through exactly why you'd use each of these properties.

For starters, using CSS when adding a background image to your website is smart because it makes your site code easier to maintain. The content of your site itself is presented in HTML, so you can use CSS to add stylistic changes. This means when you go into your site to maintain it, you'll have an easier time differentiating the content from the design aspects. Because of this, I advise you use CSS to add your background image.

Another reason is because when you use CSS, you have more control over the way that your image displays. CSS offers properties including background-size, background-position, and even background-repeat. Thanks to this, adjusting your image’s size and position is simpler than it would be otherwise.

Next, there’s also the performance update. When you add a CSS background image, it will load after your HTML content. This improves your page performance because content loads first.

As you can already tell, I highly suggest you stick with CSS for your background image needs. 

How to Make an Image Link in HTML

Images are also effective links — you can link an icon or a high-res image. Either way, the process is the same: Enclose your <img> element in an <a> (anchor) tag, like so.

Here’s an interactive example — click the HubSpot logo to be taken to the HubSpot homepage.

See the Pen Create an Image Link by HubSpot (@hubspot) on CodePen.

Making Your Website Visual

Adding images to your website is important to your visitor experience and search engines. Whether you‘re building your website with a content management system or from scratch, it’s easy. You just need to know some HTML and CSS. Add images to your website today!

Editor's note: This post was originally published in September 2020 and has been updated for comprehensiveness.