Embedding Images into a Web Page
Once you've created your image, saved it as either GIF, PNG or JPEG format, then uploaded it to a web server, you can embed it into a web page.
Here's an example:
Height and Width
<img> tag allows you to provide a width and height. These are optional. If you do use these attributes, you should use the exact dimensions of the actual image. Changing this doesn't change the actual download size of the image - it just forces a larger/smaller image into a different space. If you need to change the size of an image, for best results, resize it in your photo editor or illustration package.
Height & Width for Mobile Devices
width attributes can be useful, they can also cause problems if the user's screen is not as wide as the image. For example, if a user views your web page using a mobile device, they might have to scroll sideways to see the whole image. To overcome this issue, you can use the CSS
max-width property allows you to specify a maximum width (for example,
max-width:100%). By specifying a
100% or less, the image won't mess up the layout like it could if you had specified an absolute size for the image. If the actual image is wider than the screen, it will be scaled down until it is 100 percent (or however much you specify) of the size of its containing box. So, assuming the containing box is narrower than the screen width, the image won't push out wider than the screen.
If you choose this method, you cannot use the
height attributes (because they will override your
max-width settings). You should not use any height settings (such as
max-height) either, as they could cause the image to skew. By leaving the height properties out of it, the image will rescale proportionally. In other words, the browser will work out it's correct width and height dimensions if you only provide
You can use the CSS
background-image property, or if you prefer, the
background property to display a background image. The image could be displayed on the background of any HTML element - background of the whole page, a table cell, a div element etc.
Example of the CSS code for displaying a background image:
You can learn more about CSS background code with the CSS background code lesson of the CSS tutorial.