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


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

altAlternate text. This specifies text to be used in case the browser/user agent can't render the image.
srcLocation of the image.
crossoriginThis 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:

anonymousCross-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-credentialsCross-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.

ismapFor image maps. See the <map> element.
usemapFor image maps. See the <map> element.
widthSpecifies the width of the image.
heightSpecifies 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.

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.