HTML Picture Codes

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="html picture codes, pic code, pics, images, photo, pictures, graphics, links"> <meta name="Description" content="Embed a picture within your HTML codes."> <link rel="canonical" href="https://www.quackit.com/html/codes/html_picture_codes.cfm"> <title>HTML Picture Codes</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">HTML Picture Codes</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <p class="lead">You can use the following HTML code to embed a picture into your HTML document. The code uses the <a href="/html/tags/html_img_tag.cfm"><code><img></code></a> tag, which is the official tag to use for embedding pictures on web pages.</p> <div class="ad">  <div data-fuse="23059883629"></div> </div> <h2>Example Picture Code</h2> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><img src="/pix/samples/15m.jpg" style="max-width:100%" alt="Sample picture"></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_picture_codes" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Attributes</h2> <p>The <a href="/html/tags/html_img_tag.cfm"><code><img></code></a> tag accepts the attributes in the following table (as well as the <a href="/html/tags/html_5_global_attributes.cfm">HTML global attributes</a> and <a href="/html/tags/html_5_event_handler_content_attributes.cfm">HTML event handler content attributes</a>).</p> <table class="tabular" cellspacing="0" border="0"> <tr> <th>Attribute</th><th>Description</th> </tr> <tr> <td><code>alt</code></td><td>Alternate text. This specifies text to be used in case the browser/user agent can't render the image.</td> </tr> <tr> <td><code>src</code></td><td>Location of the image.</td> </tr> <tr> <td><code>crossorigin</code></td><td>This attribute is a CORS settings attribute. CORS stands for <i>Cross-Origin Resource Sharing</i>. The purpose of the <code>crossorigin</code> attribute is to allow you to configure the CORS requests for the element's fetched data. The values for the <code>crossorigin</code> attribute are enumerated. <p>Possible values:</p> <table class="tabular" cellspacing="0" border="0"> <tr> <th>Value</th><th>Description</th> </tr> <tr> <td><code>anonymous</code></td><td>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.</td> </tr> <tr> <td><code>use-credentials</code></td><td>Cross-origin CORS requests for the element will have the credentials flag set.</td> </tr> </table> <p>If this attribute is not specified, CORS is not used at all. </p> <p>An invalid keyword and an empty string will be handled as the <code>anonymous</code> value.</p> </td> </tr> <tr> <td><code>ismap</code></td><td>For image maps. See the <a href="/html/tags/html_map_tag.cfm"><code><map></code></a> element.</td> </tr> <tr> <td><code>usemap</code></td><td>For image maps. See the <a href="/html/tags/html_map_tag.cfm"><code><map></code></a> element.</td> </tr> <tr> <td><code>width</code></td><td>Specifies the width of the image.</td> </tr> <tr> <td><code>height</code></td><td>Specifies the height of the image.</td> </tr> </table> <h2>Background Image Code</h2> <p>You can also <a href="/html/codes/html_background_image_codes.cfm">add a picture to the background</a>, 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.</p> <p>Background images are defined differently to foreground images (as in the above example). Background images are defined using the CSS <a href="/css/properties/css_background-image.cfm"><code>background-image</code></a> property and can be applied to any HTML element.</p> <p>Here's a basic example of a background image.</p> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><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></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_background_image_codes" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <div class="tip"> <p>You can also use the <a href="/css/properties/css_background.cfm"><code>background</code></a> shorthand property to set the background image and other background properties.</p> </div> <h2>More Picture Codes</h2> <p>Here are links to more picture codes. You can do things like hyperlink images or add a border around your picture. </p> <ul> <li><a href="/html/codes/html_image_link_code.cfm">Image Links</a> - Opens a web page whenever the user clicks on your picture.</li> <li><a href="/html/tutorial/html_image_maps.cfm">Image Maps</a> - These are "clickable" hotspots on your image. One picture can link to many different web pages.</li> <li><a href="/html/codes/html_image_borders.cfm">Image Borders</a> - Adds a border around your picture.</li> <li>All about the <a href="/html/tags/html_img_tag.cfm"><code><img></code></a> element.</li> <li><a href="/html/codes/html_background_image_codes.cfm">Background Image Code</a>.</li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/html/codes/">HTML Codes</a></h3> <ul> <li><a href="/html/codes/html_background_codes.cfm" title="Set background properties on any HTML element.">HTML Background Code</a></li> <li><a href="/html/codes/bold/" title="Specify bold text in your HTML code.">HTML Bold</a></li> <li><a href="/html/codes/color/" title="Add color to your HTML code.">HTML Color</a></li> <li><a href="/html/html_color_codes.cfm" title="Hexadecimal color codes">HTML Color Codes</a></li> <li><a href="/html/codes/comment_box_code.cfm" title="Create a comment box within your HTML codes.">HTML Comment Box Code</a></li> <li><a href="/html/codes/html_scroll_box.cfm" title="Create a scroll box within your HTML codes.">HTML Scrollbox Code</a></li> <li><a href="/html/codes/tables/" title="Add an HTML table to your web page or blog.">HTML Tables</a></li> <li><a href="/html/codes/text/" title="Specify font family, size, color and more within your HTML code.">HTML Text Code</a></li> <li><a href="/html/codes/html_picture_codes.cfm" title="Embed pictures within your HTML code.">HTML Image Code</a></li> <li><a href="/html/codes/link/" title="Create hyperlinks between web pages and other documents.">HTML Link Code</a></li> <li><a href="/html/codes/html_marquee_code.cfm">HTML Marquee Code</a></li> <li><a href="/html/html_music_code.cfm">HTML Music Code</a></li> <li><a href="/html/codes/html_video_codes.cfm">HTML Video Code</a></li> <li><a href="/html/codes/html_form_code.cfm">HTML Form Code</a></li> <li><a href="/html/codes/html_frames_code.cfm">HTML Frames Code</a></li> <li><a href="/html/html_special_characters.cfm" title="ISO-8859-1">HTML Entities</a></li> <li><a href="/html/examples/" title="Copy/paste examples">HTML Examples</a></li> <li><a href="/html/html_help.cfm" title="HTML help with tables, forms, fonts, color, image maps, hyperlinks and more.">HTML Help/Cheat Sheet</a></li> <li><a href="/html/templates/" title="Thousands of pre-built websites">HTML Templates</a></li> <li><a style="padding-left:60px;font-style:italic;" href="/html/codes/">More Codes...</a></li> </ul> </li> <li> <h3><a href="/html/">HTML Reference</a></h3> <ul> <li><a href="/html/tags/" title="Alphabetical list of all HTML tags">HTML Tags</a></li> <li><a href="/html/codes/" title="">HTML Codes</a></li> <li><a href="/html/templates/" title="">HTML Templates</a></li> <li><a href="/html/html_editors/">HTML Editors</a></li> <li><a href="/html/tutorial/" title="">HTML Tutorial</a></li> <li><a href="/create-a-website/" title="">Create a Website</a></li> <li><a href="/character_sets/">Character Set Reference</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

HTML Picture Codes