Learn how to place images in your web designs using HTML and CSS.
Abstract teal, coral, tan, and gray art features web design elements.

Now that you’ve seen how easy it is to add images with CSS and HTML, try it in your own project. When you work with images in your own web designs, make sure you own the rights to the images, or that you have permission from the owner. Also, be sure to follow any guidelines the owner has for giving proper credit.

Before: Text on a web page. After: Images added to web page increase interest and visual appeal.

Images can enhance the look and feel of your web page, and provide additional context for your viewers. You can place images onto your page using CSS or HTML.

You will add a banner image and two images in the content sections.

Before you start

Download and save the project files. Open html-images.html in Dreamweaver, and view style.css in Split view.

Note: If you cannot see the entire webpage in Dreamweaver, drag the divider between the Code view and Live view windows until the webpage fits.

Cascading style sheet (CSS) is open in Split view in Dreamweaver.

Add a header image with CSS

Use CSS to set images used for style or decoration, such as background or header images.

Find the section /* -- Step 1: Start Here -- */ and add the background-image property to #headerimg CSS selector.

Browse to europa_header.jpg in the images folder and click Open. The image will not appear until a height is set for the image container. Add a height: property and set the value to 500px.

Background and header images are added to CSS.

CSS

#headerImg {
  ...
  background-image:url(images/europa_header.jpg);
  height:500px;
}

A photo of Europa, one of Jupiter’s moons, is added as the background image in CSS.

Add an image with HTML

Use the <img> tag in HTML to place images when the image is part of the content or for accessibility purposes (assisting users with disabilities).

Click on Source Code and scroll down to the section <!--- Add second image here ---> around line 42.

Type <img src=" and browse to the jupiter_body.jpg file in the images folder. Click Open.

As you can see, the image is too large for the container it lives in and does not display properly. Next we will change the size of the image so it fits.

Note: The <img> tag is self-closing, so just place the / before the >.

The HTML <img> tag is used to add images to the content of a page or for accessibility purposes.

HTML

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

HTML image source tag for a photo in the body of a web page.

Set width, height, and alt properties

HTML images are added at full size by default. You can use width and height to scale the image size. 

Add the following properties to the <img> tag:

width="500px" height="500px"

 

HTML image source tag with added dimension specifications

The alt attribute provides a short description of the image in case the image does not load in a user's browser and is also read by screen readers for users with disabilities.

Add the following property to the <img> tag:

alt="Jupiter's Great Red Spot"

HTML image source tag with added dimension specifications and alt-text

Add another image

Find the section <!--- Add third image here ---> around line 56.

Repeat what you just learned to add another image into the content. Type <img src=" and browse to sunrise_body.jpg in the images folder. Click Open.

Add the following properties to the <img> tag:

<img src="images/sunrise_body.jpg" width="500px" height="500px" alt="Gale Crater" />

HTML image source tag with added dimension specifications and alt-text

Click Preview in Browser and choose your preferred browser to see the images.

Save your files in order to view the changes.

Click Preview in Browser and choose preferred browser to test hyperlinks and view images.
09/15/2021
Was this page helpful?