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:
<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;">
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 how to add 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:
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt=”an artist's rendition of a black hole in space” width="400" height="200">
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. 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:
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.
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:
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:
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:
How to Make an Image Link in HTML
Images are also effective links — you can make a link from 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:
<a href="URL">
<img src="URL" alt="descriptive text"/>
</a>
Here’s an interactive example — click the the HubSpot logo to be taken to the HubSpot homepage.
See the Pen Create an Image Link by Christina Perricone (@hubspot) on CodePen.
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.