How To Anchor Background In Image In Powerpoint

Have you lot ever heard that people remember only 20% of what they read, but lxxx% of what they encounter? While the exact percentages are debated, the basic idea isn't: Information technology'southward piece of cake for people to learn and process information visually.

Site owner sitting on a couch with a laptop inserting an image in HTML

That'due south why near websites utilize images, and why information technology's of import to include images on your own site. Images help brand your content more informative, engaging, and memorable. In add-on to improving the visitor feel, they can also aid boost your organic search traffic.

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

Download Now: 35 Code Templates [Free Snippets]

How to Insert an Image in HTML

To insert an paradigm in HTML, use the image tag and include a source and alt attribute. Similar any other HTML 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 element is an "empty chemical element," meaning information technology does not have a closing tag. Different elements similar paragraph that consist of an opening and a closing tag with content in between, an image specifies its content with attributes in the opening tag.

Compare the following lines of code to see the deviation 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 creative person's rendition of a blackness hole in infinite">

Discover the two attributes in the image chemical element above, src and alt. Let'southward discuss both of these important attributes next. But first, this video dives in deeper into the steps we just explained.

The img src Attribute

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

In the code instance to a higher place, the source is a full hyperlink — this is because the epitome is being fetched from another website. If you want to place an paradigm stored on your server, yous tin use the image file path without the website proper noun or protocol. For case, if the epitome is located in a subfolder stored in the same place as your HTML file, your image element tin look more similar this:

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

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

The img alt Attribute

While a browser can render an image without the alt attribute, information technology'southward considered a best exercise to include this aspect. That's considering this attribute contains image alt text.

Epitome alt text is important for a few reasons. First, information technology volition appear in place of an prototype 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 accept trouble understanding the image without it.

3rd, image 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 way people can notice your website. Providing images with descriptive alt text can aid 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 image search.

The img style Aspect

Yous might as well see a mode aspect inside an <img> tag containing the width and height of the paradigm. Specifying the width and height tin can help forestall the web page from flickering while the image loads. Here'due south how the lawmaking might expect with these additional attributes:

                              
<img src="https://scx1.b-cdn.internet/csz/news/800/2017/theoreticala.jpg" alt="an artist's rendition of a black hole in space" style="width:400px;pinnacle:200px;">

Image inserted below heading and paragraph in HTML file

It's of import to note that yous tin as well 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 tin likewise be specified in pixels with split up width and summit attributes, like so:

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

This will produce the same result as the image above, where the style aspect was used. The main difference between these methods is that using split up width and style attributes will tell the browser how much space to salve for the image, which may outcome 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 paradigm equally the background of a web page or an HTML element, rather than but inserting the image onto the page, y'all'll need to use the CSS groundwork-epitome property. This CSS property replaced the background-prototype aspect in previous versions of HTML. It's much more than flexible and predictable than the HTML attribute — and nevertheless easy to use.

To set the value of background-image, you have to utilise the following syntax: url(' ');

Between the single quotation marks, yous'll put the image URL or file path.

How to Insert a Groundwork Image on a Page

To start, let's say you want to set an image as the background of the unabridged folio. In this case, yous would apply CSS to the body chemical element. Using a CSS selector, yous tin can define the groundwork-paradigm property in the caput section of your HTML file or in an external stylesheet. For this demo, we'll use the same image every bit above and change the text color to white and then nosotros can see information technology.

Here's the CSS:

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

Here'due south the HTML:

                              
<h2>Groundwork Image</h2>
<p>The background image is specified in the torso element.</p>

Here'southward the result:

Setting background image of the entire web page in HTML

Looks cracking! But what happens if the image is smaller than the browser? In that instance, 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 prevent this from happening, y'all tin can use the background-repeat property and fix it to no-repeat.

Here's the CSS:

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

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

Setting background image of body element in HTML to not repeat

You've solved the repeating problem, but now you have a lot of actress whitespace below and to the correct of the image. To ensure the groundwork image covers the unabridged body element — or, in other words, takes up the entire browser window — you lot tin utilize the background-size belongings and ready it to cover. Then, to prevent the paradigm from warping its dimensions, utilize the groundwork-attachment property and set information technology to fixed. That way, the prototype will keep its original proportions.

Here'south the CSS:

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

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

How to Insert a Background Image on an HTML Element

Y'all can too set an image as the background of an HTML element rather than the entire web page.

For example, you could identify HTML elements inside a div, then target the div with the CSS properties we used above. One difference is that instead of setting the groundwork-size belongings to cover, nosotros're going to set up it to 100% 100%. That means the epitome volition stretch horizontally and vertically as needed to fit the entire div chemical element, without retaining its original dimensions.

Hither's the CSS:

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

Hither's the HTML:

                              
<div>
    <h2>Background Epitome</h2>
    <p>In this example, the background image is specified for the div element.</p>
    <p>Only you can specify the groundwork image for any HTML element.</p>
    <p>Try it for a paragraph, heading, and more than.</p>
</div><p>This paragraph is non contained in the div. Therefore it does not have an paradigm background.</p>

Here's the effect:

Setting background image of a div element in HTML

How to Make an Image Link in HTML

Images are also effective links — you tin can make a link from an icon or a high-res prototype. Either fashion, 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'due south 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 of import to both your company experience and to search engines. It's like shooting fish in a barrel whether you're building your website with a content direction system or from scratch. You just demand to know some HTML and CSS.

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