Learn how to place images in your web designs using HTML and CSS.
work-with-html-images_1408x792

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.

images-web-design-step1

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.

images-web-design-step0

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.

images-web-design-step2a

CSS

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

images-web-design-step2b

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

images-web-design-step3a

HTML

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

images-web-design-step3b

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"

 

images-web-design-step4

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"

images-web-design-step4b

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" />

images-web-design-step5

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

Save your files in order to view the changes.

images-web-design-step6
04/16/2018
Was this page helpful?