Images in web design

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

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.

CSS

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

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

HTML

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

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"

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"

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

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

Save your files in order to view the changes.