How To Add Background Image In Brackets

Take you ever heard that people recall only 20% of what they read, just 80% of what they come across? While the exact percentages are debated, the basic thought isn't: It's easy for people to learn and process information visually.

That's why most websites utilize images, and why information technology's of import to include images on your ain site. Images help brand your content more than informative, engaging, and memorable. In improver to improving the visitor feel, they can as well assist boost your organic search traffic.

If you use a website building platform similarCMS HuborWordPress, simply click the prototype icon in your toolbar, select an image from your file managing director, and insert it. If you don't use a architect, you lot can notwithstanding easily add images to your website. You merely 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, utilize the image tag and include a source and alt attribute. Like any other HTML element, you'll add images to the body department of your HTML file.

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

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

Compare the following lines of code to come across the divergence between a paragraph and an epitome:

                                          <p>This is a paragraph.</p>
                      <img src="https://scx1.b-cdn.cyberspace/csz/news/800/2017/theoreticala.jpg" alt="an artist's rendition of a black hole in space">

Notice the two attributes in the epitome element higher up, src and alt. Permit'south discuss both of these important attributes next.

The img src Aspect

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

In the code instance above, the source is a full hyperlink — this is because the paradigm is being fetched from another website. If yous want to place an image stored on your server, you tin use the image file path without the website name or protocol. For example, if the image is located in a subfolder stored in the same place equally your HTML file, your image element can look more than like this:

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

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

The img alt Aspect

While a browser tin can render an image without the alt attribute, it'due south considered a all-time practice to include this attribute. That's because this attribute contains paradigm alt text.

Epitome alt text is important for a few reasons. Start, it volition appear in place of an epitome if the paradigm fails to load on a user's screen. 2nd, it helps screen-reading tools depict images to readers with visual impairments who might have trouble understanding the epitome without it.

Third, image alt text allows search engines to amend clamber and rank your website. Google Images — not Google Search, Google Image Search — is a major search engine on its own, and some other way people can find your website. Providing images with descriptive alt text can help you lot rank for your target keywords and drive 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 style Attribute

You might also see a style aspect within an <img> tag containing the width and height of the image. Specifying the width and height tin help forestall the web folio from flickering while the image loads. Here's how the lawmaking 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 infinite" style="width:400px;meridian:200px;">

Image inserted below heading and paragraph in HTML file

It'southward important to note that you lot can too specify the size of an image using internal or external CSS, over inline CSS. To learn the difference betwixt these three types of CSS, see our guide on how to add CSS to HTML.

The img width and height Attributes

The width and acme of an epitome 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 blackness hole in infinite" width="400" height="200">

This volition produce the same consequence as the prototype in a higher place, where the way attribute was used. The main deviation between these methods is that using separate width and style attributes volition tell the browser how much infinite to relieve for the image, which may result in smoother loading (though this volition depend on your page layout, ultimately).

How to Insert a Groundwork Image in HTML

If you'd like to fix an image as the background of a web page or an HTML element, rather than just inserting the image onto the page, yous'll demand to use the CSS background-image belongings. This CSS property replaced the background-paradigm attribute in previous versions of HTML. Information technology's much more flexible and predictable than the HTML aspect — and however like shooting fish in a barrel to use.

To set up the value of background-paradigm, 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 Paradigm on a Page

To showtime, let's say yous desire to gear up an prototype as the background of the entire page. In this case, you lot would apply CSS to the body chemical element. Using a CSS selector, you can ascertain the background-image belongings in the caput department of your HTML file or in an external stylesheet. For this demo, we'll apply the aforementioned image as above and change the text color to white and so nosotros can see information technology.

Here's the CSS:

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

Hither's the HTML:

                                          
<h2>Groundwork Prototype</h2>
<p>The background image is specified in the body element.</p>

Here'southward the effect:

Setting background image of the entire web page in HTML

Looks peachy! But what happens if the image is smaller than the browser? In that case, it 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 foreclose this from happening, you can employ the background-repeat holding and ready information technology to no-repeat.

Here's the CSS:

                                          
torso {
    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. Hither'south how it would expect on the front-end at present:

Setting background image of body element in HTML to not repeat

Yous've solved the repeating trouble, merely now you have a lot of actress whitespace beneath and to the right of the image. To ensure the groundwork image covers the entire body element — or, in other words, takes up the entire browser window — y'all tin can use the background-size property and set it to cover. Then, to prevent the image from warping its dimensions, use the background-zipper property and set it to fixed. That style, the image volition continue its original proportions.

Here'due south the CSS:

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

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

How to Insert a Background Image on an HTML Element

Y'all tin as well set an image as the background of an HTML element rather than the unabridged spider web page.

For example, you could place HTML elements inside a div, then target the div with the CSS properties we used higher up. 1 difference is that instead of setting the groundwork-size property to cover, nosotros're going to set it to 100% 100%. That ways the paradigm 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-echo: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    colour: #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 groundwork epitome for whatsoever HTML element.</p>
    <p>Try it for a paragraph, heading, and more than.</p>
</div><p>This paragraph is not contained in the div. Therefore information technology does not accept an image background.</p>

Here'south the result:

Setting background image of a div element in HTML

How to Make an Paradigm Link in HTML

Images are also effective links — yous can brand 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, similar so:

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

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

Meet the Pen Create an Image Link past 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 organisation or from scratch. You just demand to know some HTML and CSS.

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

New Call-to-action