How To Use A Background Image In Html

Have you ever heard that people remember merely 20% of what they read, but 80% of what they come across? While the exact percentages are debated, the basic idea isn't: It'due south like shooting fish in a barrel for people to learn and process information visually.

That's why most websites employ images, and why it's of import to include images on your ain 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.

If you lot use a website building platform similarCMS HuborWordPress, just click the image icon in your toolbar, select an image from your file managing director, and insert it. If you don't use a architect, you can still easily add images to your website. You just need to know someHTML. Let's walk through the process below.

Download Now: Free Intro Guide to HTML & CSS

How to Insert an Image in HTML

To insert an image in HTML, utilise the epitome tag and include a source and alt attribute. Like any other HTML element, you lot'll add together images to the body section of your HTML file.

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

The HTML epitome element is an "empty element," significant it does non have a closing tag. Different elements similar paragraph that consist of an opening and a closing tag with content in betwixt, an image specifies its content with attributes in the opening tag.

Compare the following lines of code to come across 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">

Detect the two attributes in the epitome chemical element above, src and alt. Let's hash out both of these important attributes next.

The img src Attribute

An image chemical element must always have a src (source) attribute, which contains the image URL or file path. Otherwise, the browser volition not know what to render. Permitted epitome file types will depend on the browser that loads the page, only all browsers allow you to place common formats similar .jpeg, .png, and .gif, equally well as .svg.

In the code instance above, the source is a full hyperlink — this is 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 proper noun or protocol. For example, if the paradigm is located in a subfolder stored in the same place as your HTML file, your image element can look more like this:

                                          <p>This is a paragraph.</p>
                      <img src="/csz/news/800/2017/theoreticala.jpg" alt="an artist'southward rendition of a black hole in space">

... in this case,"csz" would exist a folder located in the same directory as your HTML file.

The img alt Attribute

While a browser can return an prototype without the alt attribute, it'southward considered a best practice to include this attribute. That's considering this attribute contains image alt text.

Image alt text is of import for a few reasons. First, it volition appear in identify of an image if the prototype fails to load on a user'due south screen. Second, it helps screen-reading tools describe images to readers with visual impairments who might have trouble understanding the epitome without it.

Third, paradigm alt text allows search engines to better clamber and rank your website. Google Images — non Google Search, Google Image Search — is a major search engine on its own, and another fashion people can observe your website. Providing images with descriptive alt text can help you rank for your target keywords and bulldoze traffic to your site. In 2019, HubSpot did exactly that, leading to a 25% twelvemonth-over-year growth in organic traffic that came from web and image search.

The img fashion Attribute

You might also run across a fashion aspect inside an <img> tag containing the width and meridian of the prototype. Specifying the width and height tin can help prevent the spider web page from flickering while the image loads. Hither'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 creative person'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 notation that y'all tin can also specify the size of an epitome using internal or external CSS, over inline CSS. To larn the difference betwixt these three types of CSS, see our guide on how to add CSS to HTML.

The img width and peak Attributes

The width and top 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 creative person'due south rendition of a black hole in space" width="400" height="200">

This will produce the aforementioned consequence every bit the image above, where the mode aspect was used. The principal difference between these methods is that using split up width and style attributes will tell the browser how much infinite to save for the image, which may event in smoother loading (though this volition depend on your page layout, ultimately).

How to Insert a Background Image in HTML

If y'all'd like to set an paradigm as the background of a spider web page or an HTML element, rather than simply inserting the epitome onto the page, yous'll need to apply the CSS background-image property. This CSS property replaced the background-image attribute in previous versions of HTML. It's much more than flexible and anticipated than the HTML attribute — and still like shooting fish in a barrel to use.

To gear up the value of groundwork-epitome, you have to use the post-obit syntax: url(' ');

Betwixt the single quotation marks, you'll put the image URL or file path.

How to Insert a Background Paradigm on a Page

To beginning, allow'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, yous 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 colour to white and then we can come across it.

Here's the CSS:

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

Here's the HTML:

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

Here's the result:

Setting background image of the entire web page in HTML

Looks great! Just what happens if the prototype 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, y'all can employ the background-echo belongings and prepare information technology to no-repeat.

Here's the CSS:

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

The HTML stays the same. Here's how it would look on the forepart-terminate now:

Setting background image of body element in HTML to not repeat

Y'all've solved the repeating trouble, but at present you accept a lot of extra whitespace below and to the right of the image. To ensure the background image covers the unabridged body chemical element — or, in other words, takes up the entire browser window — yous can apply the background-size holding and set up it to encompass. Then, to prevent the prototype from warping its dimensions, use the background-attachment holding and set it to fixed. That way, the paradigm will continue its original proportions.

Here'due south the CSS:

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

The HTML stays the aforementioned. Here's how it would await on the front-end at present:

How to Insert a Background Image on an HTML Element

You tin too set an image as the background of an HTML chemical element rather than the unabridged web folio.

For example, you could identify HTML elements inside a div, then target the div with the CSS properties nosotros used to a higher place. One divergence is that instead of setting the background-size belongings to embrace, we're going to prepare it to 100% 100%. That ways the prototype will stretch horizontally and vertically as needed to fit the entire div element, without retaining its original dimensions.

Here's the CSS:

                                          
div {
    background-prototype: 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;
}

Hither'southward the HTML:

                                          
<div>
    <h2>Groundwork Image</h2>
    <p>In this instance, the background epitome is specified for the div element.</p>
    <p>But y'all can specify the groundwork paradigm for any HTML chemical 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

How to Make an Prototype Link in HTML

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

                                          
<a href="URL">
    <img src="URL" alt="descriptive text"/>
</a>

Hither's an interactive example — click the the HubSpot logo to be taken to the HubSpot homepage.

See the Pen Create an Paradigm Link by Christina Perricone (@hubspot) on CodePen.

Making Your Website Visual

Adding images on your website is important to both your visitor feel and to search engines. Information technology'due south piece of cake whether you're edifice your website with a content direction system or from scratch. You just need to know some HTML and CSS.

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

New Call-to-action