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 it’s important to include images on your site. Images help make your content more informative, engaging, and memorable. In addition to improving the visitor experience, they can also help improve your rankings on search engines.

In 2018, Google Images made up 22.6% of all search traffic in the US, far exceeding YouTube, Facebook, Pinterest and Twitter. That means 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 make sure we know how to add them. If you use a website building platform like CMS Hub or WordPress, then it’s easy. You just click the image icon in your toolbar, select an image from your file manager, and insert it.

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

Free Intro Guide to HTML & CSS [Download Now]

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 contain content between their opening and closing tags, an image has no content or closing tag. Instead, it contains attributes only. 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=”black hole”>

Notice the two attributes above. An image element must always have a 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. One, it will appear in place of an image if it fails to load on a user's screen. Two, it helps screen-reading tools describe images to readers with visual impairment who might have trouble understanding what the image conveys without it. Three, 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 would look with these additional attributes:

 
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt=”black hole” style=”width:400px;height:200px;">

Image inserted below heading and paragraph in HTML file

Image Source

It’s important to note that you can also specify the size of an image using internal or external CSS, over inline CSS.

To understand the difference between these three types of CSS, check out 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, then you’ll need to use the CSS background-image property. This CSS property replaced the background image attribute in previous versions of HTML. It is much more flexible and predictable than the HTML attribute — and still easy to use.

To set the value of the background-image property, you have to use the following syntax: url(' ');

In 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 web page. Then you’d have to 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

Image Source

That looks great! But what happens if the image is smaller than the browser? In that case, it will repeat itself, 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

Image Source

You’ve solved the repeating problem but now you have all this extra white space to the right and below the image. To ensure the image covers the entire body element — or, in other words, takes up the entire screen — you can use the background-size property and set it to “cover.” Then, to avoid the image stretching out, you can use the background-attachment property and set it to “fixed.” That way, the image will maintain 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

Image Source

How to Insert a Background Image on an HTML Element

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

For example, you could place HTML elements inside a div, then target the div with the CSS properties 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>

<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

Image Source

Making Your Website Visual

Adding images on your website is important to your visitors 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.

New Call-to-action

 css introduction

Originally published Sep 14, 2020 7:00:00 AM, updated September 14 2020

Topics:

HTML