How To Put A Background Image For A Div

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

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

If you lot utilize a website edifice platform likeCMS HuborWordPress, just click the prototype icon in your toolbar, select an epitome from your file managing director, and insert it. If you don't use a builder, you can however easily add images to your website. You lot only need to know someHTML. Let'due south 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, use the image tag and include a source and alt aspect. Like any other HTML chemical element, yous'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," meaning it does not accept a closing tag. Different elements similar 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 difference 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'southward rendition of a blackness hole in space">

Notice the two attributes in the image chemical element above, src and alt. Allow's discuss both of these important attributes adjacent.

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 will non know what to render. Permitted paradigm file types volition depend on the browser that loads the page, but all browsers permit you to place mutual formats like .jpeg, .png, and .gif, every bit well every bit .svg.

In the code example to a higher place, the source is a full hyperlink — this is because the prototype is being fetched from another website. If y'all want to identify an image stored on your server, y'all can apply the image file path without the website proper noun or protocol. For example, if the image 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 blackness hole in infinite">

... 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 render an image without the alt attribute, information technology'due south considered a best practice to include this attribute. That'south because this attribute contains image alt text.

Prototype alt text is of import for a few reasons. First, it will appear in place of an image if the image fails to load on a user's screen. 2nd, information technology helps screen-reading tools depict images to readers with visual impairments who might have trouble understanding the epitome without it.

3rd, prototype alt text allows search engines to better crawl and rank your website. Google Images — not Google Search, Google Image Search — is a major search engine on its ain, and some other way people tin find your website. Providing images with descriptive alt text tin can help you rank for your target keywords and bulldoze traffic to your site. In 2019, HubSpot did exactly that, leading to a 25% year-over-yr growth in organic traffic that came from web and prototype search.

The img style Attribute

You might besides see a style attribute within an <img> tag containing the width and superlative of the paradigm. Specifying the width and tiptop can help prevent the web page from flickering while the prototype 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'south of import to notation that you lot can also specify the size of an paradigm using internal or external CSS, over inline CSS. To acquire the departure between these three types of CSS, see our guide on how to add CSS to HTML.

The img width and top Attributes

The width and superlative of an image tin too exist specified in pixels with separate width and summit attributes, like so:

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

This will produce the aforementioned result as the paradigm to a higher place, where the mode attribute was used. The principal difference betwixt these methods is that using separate width and fashion attributes will tell the browser how much space to salve for the paradigm, which may issue in smoother loading (though this will depend on your folio layout, ultimately).

How to Insert a Background Image in HTML

If you'd like to prepare an prototype as the background of a web folio or an HTML element, rather than simply inserting the paradigm onto the page, you'll demand to employ the CSS background-image property. This CSS belongings replaced the background-image attribute in previous versions of HTML. It's much more flexible and anticipated than the HTML attribute — and nevertheless like shooting fish in a barrel to employ.

To prepare the value of groundwork-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 kickoff, permit's say you lot 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, y'all tin ascertain the background-paradigm property in the head section of your HTML file or in an external stylesheet. For this demo, nosotros'll use the same image equally above and change the text colour to white so we tin can meet it.

Hither'south 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 upshot:

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, information technology will tile itself by default every bit shown below.

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

To forestall this from happening, you can use the background-repeat property and set information technology 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;
    colour: #FFFFFF;
}

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

Setting background image of body element in HTML to not repeat

You lot've solved the repeating problem, but now you have a lot of extra whitespace below and to the correct of the image. To ensure the groundwork prototype covers the unabridged body element — or, in other words, takes upwardly the entire browser window — you can use the background-size property and prepare it to cover. And so, to foreclose the epitome from warping its dimensions, use the background-zipper property and prepare it to fixed. That way, the epitome volition keep its original proportions.

Here'south the CSS:

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

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

How to Insert a Background Epitome on an HTML Element

You can also gear up an image as the groundwork of an HTML element rather than the entire spider web page.

For instance, you could place HTML elements inside a div, and then target the div with the CSS properties we used in a higher place. I difference is that instead of setting the groundwork-size property to cover, nosotros're going to set information technology to 100% 100%. That ways the image volition stretch horizontally and vertically as needed to fit the entire div chemical element, without retaining its original dimensions.

Here's the CSS:

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

Here'southward the HTML:

                                          
<div>
    <h2>Groundwork Prototype</h2>
    <p>In this example, the background image is specified for the div element.</p>
    <p>But you tin specify the background image for any HTML element.</p>
    <p>Try it for a paragraph, heading, and more.</p>
</div><p>This paragraph is non contained in the div. Therefore it does not have an epitome background.</p>

Here's the result:

Setting background image of a div element in HTML

How to Make an Image Link in HTML

Images are too effective links — y'all 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 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'southward piece of cake whether you're building your website with a content management arrangement or from scratch. Yous only 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