Have you ever heard that people remember only 20% of what they read, but 80% of what they see? While the exact percentages are debated, the basic idea isn’t: It’s easy for people to learn and process information visually.

That’s why most websites utilize images, and why it’s important to include images on your own site. Images help make your content more informative, engaging, and memorable. In addition to improving the visitor experience, they can also help boost your organic search traffic.

Google Images — not Google Search, Google Image Search — is a major search engine on its own, and another way people can find your website. So, providing both high-quality content and images 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 search.

Now that we understand why images matter, let’s learn how to add them to a page. If you use a website building platform like CMS Hub or WordPress, then it’s easy — just click the image icon in your toolbar, select an image from your file manager, and insert it.

If you don’t use a front-end website builder, then you can still add images to your website. You just need to know some HTML. Let’s walk through the process below.

Download Now: Free Intro Guide to HTML & CSS

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

An image is known as an “empty element” in HTML. While elements like a paragraph consist of an opening and a closing tag with content in between, an image has no closing tag. Instead, it specifies its content with attributes in the opening tag.

Compare the following lines of code to see the difference between a paragraph and an image:

 

<p>This is a paragraph.</p>

<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt=”an artist's rendition of a black hole in space”>

Notice the two attributes in the image above. An image element must always have a src (source) attribute, which contains the image URL or file path. Otherwise, the browser will not know what to render. While a browser can render an image without the alt attribute, it’s considered a best practice to include. 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 impairment who might have trouble understanding the image without it. Third, it allows search engines to better crawl and rank your website.

You might also see a style attribute 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:

 
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt=”an artist's rendition of a black hole in space” style=”width:400px;height:200px;">

Image inserted below heading and paragraph in HTML file

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, check out our guide on how to add CSS to HTML.

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. 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.

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

To start, let’s say you want to set an image as the background of the entire page. 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 in an external stylesheet. For this demo, we’ll use the same image as above and change the text color to white so we can see it.

Here’s the CSS:

 
body {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    color: #FFFFFF;
}

Here’s the HTML:

 
<h2>Background Image</h2>
<p>The background image is specified in the body element.</p>

Here’s the result:

Setting background image of the entire web page in HTML

Looks great! But what happens if the image is smaller than the browser? In that case, it will tile itself by default as shown below.

Setting background image of the body element in HTML means it will repeat by default

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

Here’s the CSS:

 
body {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    background-repeat: no-repeat;
    color: #FFFFFF;
}

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

Setting background image of body element in HTML to not repeat

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:

 
body {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: #FFFFFF;
}

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

Covering the body element with background image in HTML with background-size property

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:

 
div {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    color: #FFFFFF;
}

Here’s the HTML:

 
<div>
    <h2>Background Image</h2>
    <p>In this example, the background image is specified for the div element.</p>
    <p>But you can specify the background image for any HTML element.</p>
    <p>Try it for a paragraph, heading, and more.</p>
</div>

<p>This paragraph is not contained in the div. Therefore it does not have an image background.</p>

Here’s the result:

Setting background image of a div element in HTML

Making Your Website Visual

Adding images on your website is important to both your visitor experience and to search engines. It’s easy whether you’re building your website with a content management system or from scratch. You just need to know some HTML and CSS.

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

New Call-to-action

 css introduction

Originally published May 4, 2021 7:00:00 AM, updated May 04 2021

Topics:

HTML