HTML Picture Codes

You can use the following HTML code to embed a picture into your HTML document. The code uses the <img> tag, which is the official tag to use for embedding pictures on web pages.

Example Picture Code

<img src="/pix/samples/15m.jpg" style="max-width:100%" alt="Sample picture">

Attributes

The <img> tag accepts the attributes in the following table (as well as the HTML 5 global attributes and HTML 5 event handler content attributes).

Attribute Description

alt Alternate text. This specifies text to be used in case the browser/user agent can't render the image.

src Location of the image.

crossorigin

This attribute is a CORS settings attribute. CORS stands for Cross-Origin Resource Sharing. The purpose of the crossorigin attribute is to allow you to configure the CORS requests for the element's fetched data. The values for the crossorigin attribute are enumerated.

Possible values:

Value	Description
`anonymous`	Cross-origin CORS requests for the element will not have the credentials flag set. In other words, there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication.
`use-credentials`	Cross-origin CORS requests for the element will have the credentials flag set.

If this attribute is not specified, CORS is not used at all.

An invalid keyword and an empty string will be handled as the anonymous value.

ismap For image maps. See the <map> element.

usemap For image maps. See the <map> element.

width Specifies the width of the image.

height Specifies the height of the image.

Background Image Code

You can also add a picture to the background, so that text and other elements appear in front of the image. You can do many things with background images, such as make it tile/repeat, change its position, change its size, and more.

Background images are defined differently to foreground images (as in the above example). Background images are defined using the CSS background-image property and can be applied to any HTML element.

Here's a basic example of a background image.

<div style="background-image:url('/pix/samples/bg1.gif');padding:5px;width:150px;height:200px;border:1px solid black;">
<p>See the background image?</p>
</div>

You can also use the background shorthand property to set the background image and other background properties.

More Picture Codes

Here are links to more picture codes. You can do things like hyperlink images or add a border around your picture.

Image Links - Opens a web page whenever the user clicks on your picture.
Image Maps - These are "clickable" hotspots on your image. One picture can link to many different web pages.
Image Borders - Adds a border around your picture.
All about the <img> element.
Background Image Code.