How to Upload a Picture Over a Background Html

Images in HTML

• Overview: Multimedia and embedding
• Side by side

In the beginning, the Web was just text, and information technology was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. There are other types of multimedia to consider, but it is logical to start with the humble <img> element, used to embed a unproblematic image in a webpage. In this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to CSS background images.

How do nosotros put an prototype on a webpage?

In order to put a unproblematic image on a webpage, we use the <img> element. This is an empty element (meaning that it has no text content or closing tag) that requires a minimum of 1 aspect to be useful — src (sometimes spoken as its full title, source). The src attribute contains a path pointing to the paradigm you lot want to embed in the page, which can be a relative or absolute URL, in the same manner every bit href attribute values in <a> elements.

So for example, if your image is called dinosaur.jpg, and information technology sits in the same directory equally your HTML page, you could embed the image similar and so:

If the image was in an images subdirectory, which was within the same directory as the HTML page, so y'all'd embed it like this:

                                                                            <img                    src                                          =                      "images/dinosaur.jpg"                                        >                                                

And so on.

Note: Search engines also read paradigm filenames and count them towards SEO. Therefore, you should requite your image a descriptive filename; dinosaur.jpg is improve than img835.png.

You could embed the image using its accented URL, for example:

                                                                            <img                    src                                          =                      "https://www.example.com/images/dinosaur.jpg"                                        >                                                

But this is pointless, as information technology but makes the browser do more piece of work, looking up the IP address from the DNS server all once more, etc. You lot'll almost ever keep the images for your website on the same server as your HTML.

Alert: Most images are copyrighted. Do not brandish an image on your webpage unless:

• You own the image.
• Y'all have received explicit, written permission from the image owner.
• You lot have ample proof that the epitome is, in fact, in the public domain.

Copyright violations are illegal and unethical. In addition, never point your src attribute at an image hosted on someone else's website that you don't have permission to link to. This is called "hotlinking". Again, stealing someone'southward bandwidth is illegal. It besides slows down your page, leaving you with no control over whether the image is removed or replaced with something embarrassing.

Our above code would give united states the post-obit effect:

Note: Elements like <img> and <video> are sometimes referred to as replaced elements. This is because the element'south content and size are defined past an external resource (like an image or video file), non by the contents of the element itself. You tin can read more about them at Replaced elements.

Alternative text

The next attribute we'll look at is alt. Its value is supposed to exist a textual description of the image, for utilise in situations where the prototype cannot be seen/displayed or takes a long fourth dimension to render because of a slow internet connection. For instance, our higher up code could be modified like and so:

                                                                            <img                    src                                          =                      "images/dinosaur.jpg"                                        alt                                          =                      "The caput and body of a dinosaur skeleton;           it has a big head with long sharp teeth"                                        >                                                

The easiest way to test your alt text is to purposely misspell your filename. If for instance our prototype name was spelled dinosooooor.jpg, the browser wouldn't brandish the paradigm, and would brandish the alt text instead:

Then, why would you ever meet or need alt text? It can come in handy for a number of reasons:

• The user is visually impaired, and is using a screen reader to read the spider web out to them. In fact, having alt text available to describe images is useful to most users.
• As described above, the spelling of the file or path proper noun might exist wrong.
• The browser doesn't support the image type. Some people even so use text-only browsers, such as Lynx, which displays the alt text of images.
• You may desire to provide text for search engines to utilize; for instance, search engines can match alt text with search queries.
• Users have turned off images to reduce data transfer book and distractions. This is especially common on mobile phones, and in countries where bandwidth is express or expensive.

What exactly should y'all write inside your alt attribute? Information technology depends on why the image is there in the outset place. In other words, what you lot lose if your paradigm doesn't testify upwards:

• Decoration. You should employ CSS background images for decorative images, simply if yous must utilise HTML, add together a blank alt="". If the epitome isn't part of the content, a screen reader shouldn't waste product time reading information technology.
• Content. If your image provides significant information, provide the same information in a brief alt text – or even better, in the master text which everybody can see. Don't write redundant alt text. How abrasive would it be for a sighted user if all paragraphs were written twice in the principal content? If the image is described adequately by the main text body, you tin simply utilize alt="".
• Link. If you put an paradigm within <a> tags, to turn an epitome into a link, yous nonetheless must provide accessible link text. In such cases y'all may, either, write it inside the aforementioned <a> chemical element, or within the image's alt attribute – whichever works best in your case.
• Text. Y'all should not put your text into images. If your master heading needs a drop shadow, for example, use CSS for that rather than putting the text into an prototype. Yet, If yous really can't avoid doing this, you should supply the text within the alt attribute.

Essentially, the key is to evangelize a usable feel, fifty-fifty when the images can't be seen. This ensures all users are not missing any of the content. Try turning off images in your browser and see how things expect. You'll soon realize how helpful alt text is if the prototype cannot be seen.

Width and height

You tin can utilise the width and height attributes to specify the width and pinnacle of your image. Yous tin can find your epitome'due south width and height in a number of means. For example on the Mac you can utilise Cmd + I to get the info brandish up for the prototype file. Returning to our example, nosotros could do this:

                                                                            <img                    src                                          =                      "images/dinosaur.jpg"                                        alt                                          =                      "The head and trunk of a dinosaur skeleton;           it has a large caput with long sharp teeth"                                        width                                          =                      "400"                                        height                                          =                      "341"                                        >                                                

This doesn't result in much difference to the display, under normal circumstances. But if the image isn't beingness displayed, for example, the user has only navigated to the page, and the image hasn't nonetheless loaded, you'll notice the browser is leaving a space for the image to appear in:

This is a good thing to do, resulting in the page loading quicker and more smoothly.

All the same, you shouldn't modify the size of your images using HTML attributes. If you set the image size as well big, y'all'll end up with images that wait grainy, fuzzy, or too small, and wasting bandwidth downloading an epitome that is not fitting the user's needs. The image may also end up looking distorted, if you lot don't maintain the correct aspect ratio. You should use an epitome editor to put your epitome at the correct size before putting information technology on your webpage.

Note: If yous do need to change an image's size, you lot should use CSS instead.

Paradigm titles

Every bit with links, yous tin also add championship attributes to images, to provide further supporting data if needed. In our example, we could do this:

                                                                            <img                    src                                          =                      "images/dinosaur.jpg"                                        alt                                          =                      "The head and torso of a dinosaur skeleton;           it has a large caput with long sharp teeth"                                        width                                          =                      "400"                                        height                                          =                      "341"                                        championship                                          =                      "A T-Male monarch on display in the Manchester University Museum"                                        >                                                

This gives us a tooltip on mouse hover, just like link titles:

Notwithstanding, this is non recommended — title has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won't show it unless y'all are hovering with a mouse (and so east.g. no admission to keyboard users). If you are interested in more information about this, read The Trials and Tribulations of the Title Aspect by Scott O'Hara.

It is meliorate to include such supporting information in the main article text, rather than attached to the image.

Agile learning: embedding an epitome

It is now your turn to play! This active learning section will accept y'all upwardly and running with a simple embedding do. You are provided with a basic <img> tag; we'd like you lot to embed the image located at the following URL:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Earlier we said to never hotlink to images on other servers, but this is simply for learning purposes, so nosotros'll let you off this in one case.

We would also like you to:

• Add together some alt text, and check that information technology works past misspelling the prototype URL.
• Set the prototype's correct width and elevation (hint: information technology is 200px broad and 171px high), and then experiment with other values to see what the effect is.
• Set up a title on the epitome.

If you make a fault, you tin can e'er reset it using the Reset push button. If yous go really stuck, press the Show solution push button to run into an respond:

                                                                            <h2                    >                  Live output                                          </h2                    >                                                                              <div                    class                                          =                      "output"                                                              style                                              =                        "                                                  min-height                          :                          50px;                                                "                                                              >                                                                              </div                    >                                                                              <h2                    >                  Editable code                                          </h2                    >                                                                              <p                    class                                          =                      "a11y-label"                                        >                  Press Esc to motility focus away from the code area (Tab inserts a tab grapheme).                                          </p                    >                                                                              <textarea                    id                                          =                      "code"                                        form                                          =                      "input"                                                              fashion                                              =                        "                                                  min-height                          :                          100px;                          width                          :                          95%                        "                                                              >                                                                              <img                    >                                                                              </textarea                    >                                                                              <div                    class                                          =                      "playable-buttons"                                        >                                                                              <input                    id                                          =                      "reset"                                        blazon                                          =                      "push"                                        value                                          =                      "Reset"                                        >                                                                              <input                    id                                          =                      "solution"                                        type                                          =                      "button"                                        value                                          =                      "Testify solution"                                        >                                                                              </div                    >                                                

                                  html                  {                  font-family unit                  :                  sans-serif;                  }                  h2                  {                  font-size                  :                  16px;                  }                  .a11y-label                  {                  margin                  :                  0;                  text-align                  :                  right;                  font-size                  :                  0.7rem;                  width                  :                  98%;                  }                  trunk                  {                  margin                  :                  10px;                  background                  :                  #f5f9fa;                  }                              

                                  var                  textarea                  =                  document.                  getElementById                  (                  'code'                  )                  ;                  var                  reset                  =                  certificate.                  getElementById                  (                  'reset'                  )                  ;                  var                  solution                  =                  document.                  getElementById                  (                  'solution'                  )                  ;                  var                  output                  =                  document.                  querySelector                  (                  '.output'                  )                  ;                  var                  code                  =                  textarea.value;                  var                  userEntry                  =                  textarea.value;                  function                  updateCode                  (                  )                  {                  output.innerHTML                  =                  textarea.value;                  }                  reset.                  addEventListener                  (                  'click'                  ,                  function                  (                  )                  {                  textarea.value                  =                  code;                  userEntry                  =                  textarea.value;                  solutionEntry                  =                  htmlSolution;                  solution.value                  =                  'Testify solution'                  ;                  updateCode                  (                  )                  ;                  }                  )                  ;                  solution.                  addEventListener                  (                  'click'                  ,                  function                  (                  )                  {                  if                  (solution.value                  ===                  'Show solution'                  )                  {                  textarea.value                  =                  solutionEntry;                  solution.value                  =                  'Hide solution'                  ;                  }                  else                  {                  textarea.value                  =                  userEntry;                  solution.value                  =                  'Show solution'                  ;                  }                  updateCode                  (                  )                  ;                  }                  )                  ;                  var                  htmlSolution                  =                  '<img src="https://raw.githubusercontent.com/mdn/learning-area/chief/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The caput and torso of a dinosaur skeleton; information technology has a large head with long sharp teeth"\n width="200"\n height="171"\due north title="A T-Rex on display in the Manchester Academy Museum">'                  ;                  var                  solutionEntry                  =                  htmlSolution;                  textarea.                  addEventListener                  (                  'input'                  ,                  updateCode)                  ;                  window.                  addEventListener                  (                  'load'                  ,                  updateCode)                  ;                  // stop tab fundamental tabbing out of textarea and                  // arrive write a tab at the caret position instead                  textarea.                  onkeydown                  =                  function                  (                  due east                  )                  {                  if                  (eastward.keyCode                  ===                  9                  )                  {                  e.                  preventDefault                  (                  )                  ;                  insertAtCaret                  (                  '\t'                  )                  ;                  }                  if                  (e.keyCode                  ===                  27                  )                  {                  textarea.                  blur                  (                  )                  ;                  }                  }                  ;                  function                  insertAtCaret                  (                  text                  )                  {                  var                  scrollPos                  =                  textarea.scrollTop;                  var                  caretPos                  =                  textarea.selectionStart;                  var                  front end                  =                  (textarea.value)                  .                  substring                  (                  0                  ,                  caretPos)                  ;                  var                  back                  =                  (textarea.value)                  .                  substring                  (textarea.selectionEnd,                  textarea.value.length)                  ;                  textarea.value                  =                  front                  +                  text                  +                  back;                  caretPos                  =                  caretPos                  +                  text.length;                  textarea.selectionStart                  =                  caretPos;                  textarea.selectionEnd                  =                  caretPos;                  textarea.                  focus                  (                  )                  ;                  textarea.scrollTop                  =                  scrollPos;                  }                  // Update the saved userCode every time the user updates the text expanse code                  textarea.                  onkeyup                  =                  function                  (                  )                  {                  // We merely desire to save the state when the user lawmaking is being shown,                  // not the solution, so that solution is not saved over the user code                  if                  (solution.value                  ===                  'Bear witness solution'                  )                  {                  userEntry                  =                  textarea.value;                  }                  else                  {                  solutionEntry                  =                  textarea.value;                  }                  updateCode                  (                  )                  ;                  }                  ;                              

Annotating images with figures and effigy captions

Speaking of captions, at that place are a number of ways that yous could add a caption to go with your image. For example, there would be zip to stop you from doing this:

                                                                            <div                    grade                                          =                      "figure"                                        >                                                                              <img                    src                                          =                      "images/dinosaur.jpg"                                        alt                                          =                      "The head and trunk of a dinosaur skeleton;             it has a large head with long precipitous teeth"                                        width                                          =                      "400"                                        height                                          =                      "341"                                        >                                                                              <p                    >                  A T-Rex on brandish in the Manchester Academy Museum.                                          </p                    >                                                                              </div                    >                                                

This is OK. It contains the content you demand, and is nicely stylable using CSS. Just there is a problem here: there is cypher that semantically links the image to its caption, which tin cause problems for screen readers. For instance, when you have l images and captions, which caption goes with which prototype?

A better solution, is to utilize the HTML5 <effigy> and <figcaption> elements. These are created for exactly this purpose: to provide a semantic container for figures, and to clearly link the figure to the caption. Our in a higher place instance could be rewritten like this:

                                                                            <figure                    >                                                                              <img                    src                                          =                      "images/dinosaur.jpg"                                        alt                                          =                      "The head and torso of a dinosaur skeleton;             information technology has a big head with long precipitous teeth"                                        width                                          =                      "400"                                        meridian                                          =                      "341"                                        >                                                                              <figcaption                    >                  A T-Rex on brandish in the Manchester University Museum.                                          </figcaption                    >                                                                              </figure                    >                                                

The <figcaption> element tells browsers, and assistive engineering science that the caption describes the other content of the <effigy> chemical element.

Notation: From an accessibility viewpoint, captions and alt text have singled-out roles. Captions benefit even people who can see the image, whereas alt text provides the same functionality equally an absent prototype. Therefore, captions and alt text shouldn't just say the same thing, considering they both appear when the image is gone. Try turning images off in your browser and see how information technology looks.

A figure doesn't have to exist an epitome. It is an independent unit of content that:

• Expresses your pregnant in a compact, easy-to-grasp way.
• Could become in several places in the page's linear flow.
• Provides essential information supporting the main text.

A effigy could be several images, a lawmaking snippet, sound, video, equations, a table, or something else.

Active learning: creating a figure

In this active learning section, we'd like you to take the finished code from the previous active learning section, and turn information technology into a effigy:

1. Wrap information technology in a <figure> chemical element.
2. Copy the text out of the championship attribute, remove the title attribute, and put the text within a <figcaption> element below the image.

If you brand a mistake, you can e'er reset it using the Reset button. If you get really stuck, printing the Evidence solution button to see an respond:

                                                                            <h2                    >                  Live output                                          </h2                    >                                                                              <div                    grade                                          =                      "output"                                                              style                                              =                        "                                                  min-pinnacle                          :                          50px;                                                "                                                              >                                                                              </div                    >                                                                              <h2                    >                  Editable lawmaking                                          </h2                    >                                                                              <p                    class                                          =                      "a11y-label"                                        >                  Press Esc to motion focus abroad from the code area (Tab inserts a tab character).                                          </p                    >                                                                              <textarea                    id                                          =                      "lawmaking"                                        grade                                          =                      "input"                                                              mode                                              =                        "                                                  min-elevation                          :                          100px;                          width                          :                          95%                        "                                                              >                                                                              </textarea                    >                                                                              <div                    grade                                          =                      "playable-buttons"                                        >                                                                              <input                    id                                          =                      "reset"                                        blazon                                          =                      "push button"                                        value                                          =                      "Reset"                                        >                                                                              <input                    id                                          =                      "solution"                                        type                                          =                      "push button"                                        value                                          =                      "Evidence solution"                                        >                                                                              </div                    >                                                

                                  html                  {                  font-family unit                  :                  sans-serif;                  }                  h2                  {                  font-size                  :                  16px;                  }                  .a11y-label                  {                  margin                  :                  0;                  text-align                  :                  right;                  font-size                  :                  0.7rem;                  width                  :                  98%;                  }                  body                  {                  margin                  :                  10px;                  background                  :                  #f5f9fa;                  }                              

                                  var                  textarea                  =                  document.                  getElementById                  (                  'code'                  )                  ;                  var                  reset                  =                  document.                  getElementById                  (                  'reset'                  )                  ;                  var                  solution                  =                  document.                  getElementById                  (                  'solution'                  )                  ;                  var                  output                  =                  document.                  querySelector                  (                  '.output'                  )                  ;                  var                  code                  =                  textarea.value;                  var                  userEntry                  =                  textarea.value;                  function                  updateCode                  (                  )                  {                  output.innerHTML                  =                  textarea.value;                  }                  reset.                  addEventListener                  (                  'click'                  ,                  function                  (                  )                  {                  textarea.value                  =                  lawmaking;                  userEntry                  =                  textarea.value;                  solutionEntry                  =                  htmlSolution;                  solution.value                  =                  'Bear witness solution'                  ;                  updateCode                  (                  )                  ;                  }                  )                  ;                  solution.                  addEventListener                  (                  'click'                  ,                  function                  (                  )                  {                  if                  (solution.value                  ===                  'Show solution'                  )                  {                  textarea.value                  =                  solutionEntry;                  solution.value                  =                  'Hide solution'                  ;                  }                  else                  {                  textarea.value                  =                  userEntry;                  solution.value                  =                  'Show solution'                  ;                  }                  updateCode                  (                  )                  ;                  }                  )                  ;                  var                  htmlSolution                  =                  '<figure>\northward <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; information technology has a large head with long sharp teeth"\due north width="200"\north superlative="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'                  ;                  var                  solutionEntry                  =                  htmlSolution;                  textarea.                  addEventListener                  (                  'input'                  ,                  updateCode)                  ;                  window.                  addEventListener                  (                  'load'                  ,                  updateCode)                  ;                  // end tab key tabbing out of textarea and                  // make it write a tab at the caret position instead                  textarea.                  onkeydown                  =                  role                  (                  due east                  )                  {                  if                  (e.keyCode                  ===                  9                  )                  {                  e.                  preventDefault                  (                  )                  ;                  insertAtCaret                  (                  '\t'                  )                  ;                  }                  if                  (east.keyCode                  ===                  27                  )                  {                  textarea.                  blur                  (                  )                  ;                  }                  }                  ;                  part                  insertAtCaret                  (                  text                  )                  {                  var                  scrollPos                  =                  textarea.scrollTop;                  var                  caretPos                  =                  textarea.selectionStart;                  var                  front                  =                  (textarea.value)                  .                  substring                  (                  0                  ,                  caretPos)                  ;                  var                  back                  =                  (textarea.value)                  .                  substring                  (textarea.selectionEnd,                  textarea.value.length)                  ;                  textarea.value                  =                  front                  +                  text                  +                  back;                  caretPos                  =                  caretPos                  +                  text.length;                  textarea.selectionStart                  =                  caretPos;                  textarea.selectionEnd                  =                  caretPos;                  textarea.                  focus                  (                  )                  ;                  textarea.scrollTop                  =                  scrollPos;                  }                  // Update the saved userCode every time the user updates the text surface area code                  textarea.                  onkeyup                  =                  function                  (                  )                  {                  // We only desire to salvage the state when the user code is being shown,                  // not the solution, so that solution is not saved over the user code                  if                  (solution.value                  ===                  'Testify solution'                  )                  {                  userEntry                  =                  textarea.value;                  }                  else                  {                  solutionEntry                  =                  textarea.value;                  }                  updateCode                  (                  )                  ;                  }                  ;                              

CSS groundwork images

You lot can too employ CSS to embed images into webpages (and JavaScript, just that'southward another story entirely). The CSS background-epitome property, and the other background-* properties, are used to command groundwork paradigm placement. For example, to place a background epitome on every paragraph on a page, you could practice this:

                                  p                  {                  background-paradigm                  :                                      url                    (                    "images/dinosaur.jpg"                    )                                    ;                  }                              

The resulting embedded paradigm is arguably easier to position and control than HTML images. So why bother with HTML images? Every bit hinted to above, CSS background images are for decoration but. If y'all only want to add something pretty to your folio to raise the visuals, this is fine. Though, such images accept no semantic significant at all. They can't have whatsoever text equivalents, are invisible to screen readers, and so on. This is where HTML images shine!

Summing upward: if an image has meaning, in terms of your content, you should apply an HTML image. If an image is purely decoration, you should utilize CSS background images.

Test your skills!

Yous've reached the stop of this article, merely can y'all remember the virtually of import data? You can find some further tests to verify that you've retained this data before you lot move on — come across Exam your skills: HTML images.

Summary

That's all for now. Nosotros accept covered images and captions in item. In the adjacent commodity we'll move information technology up a gear, looking at how to use HTML to embed video and audio in web pages.

• Overview: Multimedia and embedding
• Next

In this module

• Video and audio content
• From <object> to <iframe> — other embedding technologies
• Adding vector graphics to the Web
• Responsive images
• Mozilla splash page

dietrichwhoint.blogspot.com

Source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML