How To Link A Background Image In Html

Have you ever heard that people recall but 20% of what they read, but lxxx% of what they come across? While the verbal percentages are debated, the basic idea isn't: It's easy for people to acquire and process information visually.

That's why most websites utilize images, and why information technology'south of import to include images on your own site. Images help make your content more than informative, engaging, and memorable. In addition to improving the visitor experience, they can also help boost your organic search traffic.

If you use a website building platform similarCMS HuborWordPress, merely click the image icon in your toolbar, select an epitome from your file managing director, and insert information technology. If you don't use a builder, y'all tin even so hands add images to your website. You just need to know someHTML. Let's walk through the process below.

Download Now: Free HTML & CSS Hacks

How to Insert an Epitome in HTML

To insert an image in HTML, utilize the epitome tag and include a source and alt attribute. Similar whatever other HTML chemical element, you'll add images to the body section of your HTML file.

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

The HTML image chemical element is an "empty element," significant information technology does non have a closing tag. Unlike elements like paragraph that consist of an opening and a closing tag with content in between, an paradigm specifies its content with attributes in the opening tag.

Compare the following lines of code to see the deviation betwixt 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 pigsty in space">

Find the 2 attributes in the image element above, src and alt. Let's discuss both of these important attributes adjacent.

The img src Aspect

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

In the code case to a higher place, the source is a full hyperlink — this is because the image is beingness fetched from another website. If y'all want to place an image stored on your server, you can apply the epitome file path without the website name or protocol. For example, if the paradigm is located in a subfolder stored in the same place equally your HTML file, your paradigm element can wait more like this:

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

... in this instance,"csz" would exist a folder located in the aforementioned directory equally your HTML file.

The img alt Attribute

While a browser can render an image without the alt attribute, it's considered a best practise to include this attribute. That's because this attribute contains image alt text.

Image alt text is of import for a few reasons. First, information technology will appear in identify 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 information technology.

3rd, image alt text allows search engines to better crawl and rank your website. Google Images — non Google Search, Google Prototype Search — is a major search engine on its own, and another way people tin can find your website. Providing images with descriptive alt text can help y'all 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 prototype search.

The img style Attribute

Y'all might also encounter a style aspect inside an <img> tag containing the width and tiptop of the image. Specifying the width and height tin assistance prevent the spider web page from flickering while the image loads. Here's how the code might look with these boosted 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;peak:200px;">

Image inserted below heading and paragraph in HTML file

It's important to note that you tin also specify the size of an prototype using internal or external CSS, over inline CSS. To acquire the difference betwixt these iii 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 prototype tin besides be specified in pixels with separate width and height attributes, similar so:

                                          <img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt="an creative person's rendition of a black hole in infinite" width="400" height="200">

This will produce the same issue as the image above, where the style attribute was used. The main divergence betwixt these methods is that using separate width and style attributes will tell the browser how much infinite to save for the image, which may effect in smoother loading (though this will depend on your page layout, ultimately).

How to Insert a Background Epitome in HTML

If you'd like to set an prototype as the background of a web page or an HTML chemical element, rather than only inserting the image onto the page, you'll need to use the CSS groundwork-image belongings. This CSS belongings 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 prepare the value of background-prototype, yous accept to use the post-obit syntax: url(' ');

Betwixt the single quotation marks, y'all'll put the paradigm URL or file path.

How to Insert a Background Prototype on a Page

To starting time, let'southward say you want to gear up an paradigm as the background of the entire page. In this case, yous would utilize CSS to the trunk element. Using a CSS selector, you tin 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 equally above and change the text colour to white and then we can see it.

Here's the CSS:

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

Hither'southward the HTML:

                                          
<h2>Background Image</h2>
<p>The background paradigm is specified in the torso chemical element.</p>

Here's the issue:

Setting background image of the entire web page in HTML

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

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 prepare it to no-echo.

Here'south the CSS:

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

The HTML stays the same. Hither's how it would look on the front-terminate at present:

Setting background image of body element in HTML to not repeat

You lot've solved the repeating trouble, just now you take a lot of extra whitespace below and to the right of the image. To ensure the groundwork image covers the entire body element — or, in other words, takes upwards the entire browser window — you tin can use the background-size property and set information technology to embrace. So, to prevent the prototype from warping its dimensions, use the background-zipper property and fix information technology to fixed. That fashion, the image will keep its original proportions.

Hither's the CSS:

                                          
trunk {
    groundwork-epitome: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    groundwork-repeat: no-echo;
    groundwork-attachment: fixed;
    background-size: cover;
    colour: #FFFFFF;
}

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

How to Insert a Groundwork Image on an HTML Chemical element

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

For case, you could place HTML elements inside a div, so target the div with the CSS properties nosotros used in a higher place. Ane departure is that instead of setting the background-size property to comprehend, nosotros're going to set it to 100% 100%. That means the image volition stretch horizontally and vertically every bit needed to fit the unabridged div element, without retaining its original dimensions.

Hither'south the CSS:

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

Hither's the HTML:

                                          
<div>
    <h2>Groundwork Image</h2>
    <p>In this instance, the background epitome is specified for the div element.</p>
    <p>But yous tin can specify the background image for whatever HTML element.</p>
    <p>Effort it for a paragraph, heading, and more.</p>
</div><p>This paragraph is not contained in the div. Therefore it does non have an image groundwork.</p>

Here'south the upshot:

Setting background image of a div element in HTML

How to Make an Epitome 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 and then:

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

Here'due south an interactive example — click the the HubSpot logo to be taken to the HubSpot homepage.

See the Pen Create an Epitome 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'due south easy whether you're building your website with a content management system or from scratch. You lot just need to know some HTML and CSS.

Editor's notation: This mail service was originally published in September 2020 and has been updated for comprehensiveness.

New Call-to-action