After this module you will have the skills to start to put together a beautiful website. We will learn how to add images in HTML and background images in CSS. This module also covers CSS properties for adding borders, spacing, and box shadows.

Background (CSS) vs. Embedded (HMTL) Images

There are two ways to add images to a web page. If the image is part of the website content, then you add the image with HTML. If the image is part of the design but not key to the content, then you add a background image with CSS.

HTML Embedded Images	CSS Background Images
Added in the HTML	Added in the CSS
Used when the image is part of the content	Used when the image is more decorative
Text is usually not placed on top of the image.	Images and text can be placed in front of the background image.
The code looks like this: <img src=”images/my-image.png” height=”100″ width=”100″ alt=”my cool image”>	The code looks like this: body{ background-image: url(images/my- image.png); }
You need to specify the height and width of the image, and also add alternative text for screen readers.	Since this is a background image, you can specify which parts of the image you want to use in the background.

First we’ll cover the HTML embedded images in this module. Then we will learn some cool CSS properties that can be applied to embedded images (like borders and border radius). Last but not least we’ll come back at the end and cover CSS background images.

HTML Embedded Images

Review of HTML Attributes

HTML images require a number of attributes. Here is a quick review of HTML attributes from Module 3.

Attributes modify the HTML element. In the example below, class=”headline” is the attribute:

<h1 class="headline">My Headline</h1>

To add an attribute, first type a space after the element, then type = , and then place the value in quotation marks. Most elements have attributes and sometimes an element will have several attributes, like this:

<h1 class="headline" id="headline">My Headline</h1>

Note that there is a space between each attribute. An attribute can also have multiple values. In the example below, there are two classes (headline and home-page), with a space in between each class:

<h1 class="headline home-page">My Headline</h1>

HTML <img> Attributes

The element for HTML images is <img>. Use four attributes on every <img>:

1. src: Location of the image in your website files
2. alt: Describe the image for text readers
3. height: Height in pixels
4. width: Width in pixels

The code for the eclipse photo may look something like this:

<img src="images/eclipse.jpg" alt="sliver of sun during eclipse"  height="200" width="200">

The src Attribute

One of the attributes for an image is the src for “source”. The src attribute tells the browser where to find the images in your website files.

src=”images/sunset.jpg” in English is saying:

Find the image named “sunset.jpg” in the “images” folder. 

The height and width Attributes

It may be a bit obvious, but when you put in the height and width attributes, you need to find the actual height and width of the image. On a website, you may need to resize the image in order to make it the right size for the web page.

You can see the height and width of an image in Windows File Explorer or Mac Finder. If you don’t put in a height and width, then the browser doesn’t know how much space to allow for the image. We will learn how to prepare images for use on websites in Module 12.

The alt Attribute

The alt Attribute is very important for low-vision website visitors. A screen reader will read the words in the alt tag out loud to your website visitor. The alt attribute is also important for Search Engine Optimization. As a student, the code you are creating in class can be used as code samples. If a potential employer is reviewing your code quality, one of the items they will consider is the quality of your alt text.

Create an Images Folder

Because the coding convention is to put the images in a folder called, “images”, you places the word “images” into the src attribute.

<img src=”images/my-image.jpg” … >

You can read more about it at this blog post at WebDevStudents.com:

Website Files and Folders: Explaining the Magic

If you are following along with the textbook (Saint Paul College students are required to) then your files in your text editor should look something like this. Note the images folder inside of the pacific folder.

The src can either be an absolute link or a relative link.

<img src="https://my-domain.com/images/my-image.png"><!-- this is an absolute link -->

<img src="images/my-image.png"><!-- this is a relative link -->

Rules for Image Organization and Naming

• Put your images in a folder called, “images”
• Use all lowercase letters. You may need to change photo file names to all lowercase.
• Do not use punctuation symbols and spaces except the hyphen (-). 
• Put a hyphen between the words in a file name, like this: my-cool-image.png
• Do not change the file extensions
  (usually .jpg, or .png)

Note: You can find an image in the website url, eg. 

https://isthisanagate.com/images/wordfind.png

On the URL above, first it is the https://, then the domain name, then the images folder, and lastly, the file name of the image. 

<img> is a Self-Closing Tag

Self-closing tags do not have a closing tag. We know some other self-closing tags:

• <hr> for horizontal rule
• <br> to break to a new line
• <!DOCTYPE html>

Demo: Embedded Images

This video demonstrates how to code an embedded image.

Exercise: Embedded Images

1. Open JSFiddle.net
2. Go to Google Images, get a icon-sized image. Find the image you like and open the image in a new window to grab the full URL. Or you can use this image: https://webdevstudents.com/wp-content/uploads/2020/12/toolbox-300×300.jpg
3. Add an <img> to your JSFiddle, and put  in the src, height, width, and alt attributes.

Your fiddle should look like this:

How do you make an image into a link?

You may have noticed that on most websites you can click on the logo to return to the home page. That is because you can make an image into a link by putting an <a> tag around the images. The code looks like this:

<a href="https://whitebuffalowebsites.com">
     <img src="http://whitebuffalowebsites.com/images/logo-small.png" height="100" width="300" alt="White Buffalo Logo">
</a>

Image Permissions

You need to have the permission to any image that you use on your website. Some Google images cannot be used at all, and some only used can be with attribution. Here are links to where you can find free and low cost images.

• Pixabay.com
• Freeimages.com
• 123rf.com: low-cost Royalty Free images

If you use images from images.google.com, you need to check to see if it may be used, and, if so, check to see what attribution is required. Wikipedia images may be used but usually require attribution.

Of course, if the you take the image on your phone you don’t need permission.

CSS Borders

For a border to be displayed, you need to have three CSS properties: border-width, border-style, and border-color. The code looks like this:

div{
   border-width: 12px;
   border-style: solid;
   border-color: #a51d01;
}

If you miss one of the three, your border will not display. Doesn’t it seems like a hassle to add three properties just to display one border?

CSS Shorthand Properties

With CSS shorthand properties, you can make it a lot easier to place a border in your web page. You include all three border properties in one property with the shorthand. The code looks like this:

div{ 
   border: 12px solid #A51D01; 
}

You still need to specify a width, a style and a color, but you can do it all with one property instead of with three. Note that you put a space (not a comma) between each value. It is called a “shorthand” because you don’t have to separately type in the three border property:value combinations (border-width, border-style, and border-color.)

Single Border Lines

You can place a border on one side only. To do that, use the following properties:

• border-bottom
• border-left
• border-right
• border-top

You can see an example of border-bottom at the top of this web page. In designing this page, I used border-bottom on the <h2> tags at the top of the page. The code looks something like this:

h2{
   border-bottom: 5px solid #F6D23D;
}

Demo: Borders

In this video I demonstrate how to use borders in JSFiddle.

Exercise: CSS Borders

1. Open JSFiddle
2. Add a border to your image in JSFiddle
3. Create a h1 element and add a border.
4. Try some borders other than solid, eg. dotted or groove
5. Add a border to a single side

Not sure where to start? Here is some code from a JSFiddle.

Block and Inline Elements

By default, elements have a default display property. They are either display: block or display: inline.

Block Elements	Inline Elements
Block elements are full-width elements. They fill the full width of their containing element.	Inline elements only use the width that they need. If there is room, the browser will place the next element next to it.
<p><h1><div><hr> are all block elements	<img><a><span> are inline elements

You can change a block element to an inline element with the display property. By default, <h1> is a block element. The “Hello World” with the red border is the default. To change the default, add display:inline to the CSS. The “Hello World” with the green border shows what the <h1> element looks like if it is changed to an inline element.

This is a quick introduction to the display property and the inline and block values. We will cover this in more depth in Module 5.

Demo: Inline vs. Block

This video demonstrates the impact of changing an image from a block element to an inline element.

Exercise: Block and Inline Elements

You can keep using the same JSFiddle from the last exercise.

1. Go to jsfiddle.net
2. Add an h1 element to your fiddle. 
3. Add a border to your h1
4. Change the h1 element from its default of block to an inline element with display:inline

Your JSFiddle may look like the example below.

CSS Padding

In CSS, we have two types of white or negative space: padding and margin. Padding goes inside the border, and margin goes outside of it. As a web developer, I spend a lot of time adjusting the padding and margin on websites.

The Box Model

How the website spacing works together is called the “Box Model”. In the image below, the blue color is the margin and is outside of the border. The red color is the padding and is inside of the border. The content would be the text or image.

The padding Property

Padding is empty space between the content of the HTML element and the border. You can see the difference padding makes in the image below:

The image on the left has no padding, and the image on the right has 20px of padding. The code for the image on the right looks like this:

img{
  border: 5px solid purple;
  padding: 20px;
}

You can set padding with ems, pixels (px) or percent (%). Sometimes percent works well when designing for mobile because the amount of space is reduced as the screen is narrowed.

Sometimes you need different amounts of padding on each side. You can also set the padding for each side separately. The code looks like this:

img{
   padding-top:5px;
   padding-right:10px;
   padding-bottom:3px;
   padding-left:30px;
}

There is a shorthand for padding as well. Say you a different amount of space on each side of your element. The padding goes around the clock starting at the top. Top, right, bottom, left.

img{
   padding: 5px 10px 3px 30px;
}

Demo: Padding

In this video I demonstrate how to set the padding. I also added a background color, so you can see the padding inside of the border.

Exercise: Padding

1. Open JSFiddle.net
2. Add padding to your <h1> element and image
3. Add different padding to each side of the image

Your JSFiddle should look something like this:

CSS border-radius

You use the border-radius property to make rounded corners. Lower values are less rounded and higher values are more rounded. The image below show you some options for border radius:

Website designers often choose one border-radius number for all corners on the entire website, so the website has a consistent look. You can also set the each corner to a different border radius with the border-radius shorthand:

button{
   border-radius: 15px 30px 100px 5px;
}

Demo: Border Radius

In the video below I demonstrate how to set a border radius. If you have a square element (like a square image) you can make it round with a border-radius of 50%.

Exercise: border-radius

1. Open JSFiddle.net
2. Add a border radius to your image or h1
   • eg. border-radius: 5px
3. Make your image round with the border-radius of 50%
4. Challenge: Design a border with a variety of corner radii

Your JSFiddle should look something like this:

Box Shadows and CSS Generators

The CSS properties for box-shadows are a bit complicated to code. Developer have created CSS Generators to generate the CSS you need for box-shadows and gradients. The developers who make CSS generators do it for advertising revenue, so be careful clicking on links as you use them.

To find a CSS Generator, simply Google it, and the best ones should come to the top. If you don’t like the generator you choose first, simply try the next one.

You can find CSS Generators for text-shadows and gradients as well as box-shadows.

The box-shadow Property

The box-shadow property requires four properties:

1. horizontal offset, 
2. vertical offset, 
3. blur radius,
4. color 

Place a space in between each of the four properties, like this:

box-shadow: 5px 5px 5px #828282;

A box-shadow can look like this image:

This is the code for the above image:

img{
  border: 5px solid purple;
  box-shadow: 2px 2px 4px black;
}

CSS Generators

To save a lot of trial and error in designing your websites, you will probably want to use a CSS Generator for text-shadows, box-shadows, and gradients. Simply google it to find one. Here are some that are coming to the top of search right now.

Gradient Generator: https://cssgradient.io/

Text-shadow Generator: https://html-css-js.com/css/generator/text-shadow/

Box-shadow Generator: https://cssgenerator.org/box-shadow-css-generator.html

Background Images

Review: Two Ways to Add Images

Remember that there are two ways to add images to a website? You can either add an image in the HTML or you can add a background image in the CSS. We covered how to add HTML embedded images at the start of this module. Now we will cover how to add the CSS background images.

CSS background images are a bit more complicated to code than embedded images, but you should use them if the image is a background-ground image and not part of the content. We will be revisiting HTML vs CSS images in Module 12.

In order to use background images, you usually need to use at least three background properties: background-image, background-repeat, and background-size. (There are more background properties, but these are the three you are likely to use most often. If your image needs to be a certain height then you would also set a height.)

If you were creating a background image for the entire webpage, you would select “body” and add the three properties, like this:

body{
   background-image: url(images/my-background.png);
   background-repeat: no-repeat;
   background-size: cover;
}

The background-image Property

To add a background image, you need to specify the location of the image in a url. The url can either be a relative link or an absolute link (starting with https). The code looks like this:

background-image: url(images/my-background.png);

The background-repeat Property

In the early days of the Internet, images were sparingly used on websites because users had slower Internet connections than we do today. To speed up page load time the workaround was to use a tiny background image that repeated over and over. Since repeating images are rarely used today in web-design, we almost always want to override the default behavior of repeating images.

Here are some background-repeat property values:

background-repeat: repeat – the default

background-repeat: no-repeat – Turns off the repeating of the background image. This is the one you will use most often.

background-repeat: repeat-x – The background image is repeated only horizontally

background-repeat: repeat-y – The background image is repeated only vertically

The background-size Property

The background-size property is used to designate how the background image should be sized on the element.

background-size: cover – Covers the entire background area selected without distorting the image. The entire image will not be shown, unless it is coincidentally the same size as the element selected. This is the option used most frequently for background photos.

background-size: contain – Makes the image as large as it can be and showing the full image. This option will leave some white space behind the image. 

background-size: 100% 100% – This option stretches the background image to fit. It is rarely used since it distorts the image to fit the space. It is the option used in the Pacific Trails lab. 

background-size: auto auto – The default setting is background-size: auto auto. The image is displayed in its actual size. 

Background Image Examples

The background images used in these examples is 300 x 300 pixels in size.

Example 1: Default Background Behavior

This example demonstrates what happens if there is a background image but the developer doesn’t set the background-repeat. As you can see, the background image repeats itself both horizontally and vertically.

Example 2: Adding no-repeat

This example demonstrates what happens if there is a background image and the developer uses background-size: no-repeat. As you can see, the value of no-repeat stops the image from repeating.

Example 3: no-repeat and contain

This example demonstrates what happens if there is a background image and developer sets the the background-size to contain. The entire image is displayed, but it does not fill the entire background. Note that I needed to add a height to the image. I added the height because I wanted the image to be larger than the elements on top of it.

Example 4: no-repeat and cover

This example demonstrates what happens if there is a background image and developer sets the the background-size to cover. Note that the image is stretched to fit and is pixelated, since it is too small for the background.  Since the aspect ratio of the image is square, the entire image is not displayed.

This is the setting you are most likely to use with background-images, although you would want an image large enough to not be pixelated. You may also want to specify how the image is positioned with background-position, which we will cover later.

Demonstration: CSS Background Images

In this video I demonstrate how to use background-image in CSS.

Exercise: CSS Background Images

1. Open JSFiddle.net
2. Find a background image on Google images or use this url:

https://webdevstudents.com/wp-content/uploads/2022/09/hd-wallpaper-2468874_1280-300×300.jpg

3. Add it to your JSFiddle as a body background image
4. Try it with background-repeat properties

background-repeat: no-repeat;

background-repeat: repeat-x;

Background-repeat:repeat-y;

5. Try it with background-size properties

• background-size: cover;
• background-size: contain;
• background-size:100% 100%;

Your fiddle should look something like this:

Lab: Chapter 4 of Pacific Trails

The lab for this module is Chapter 4 of Pacific Trails. In the lab, one of the instructions is to code a hero image. A hero image is the large image at to the top of a home page of a website. It is typically a full width image. 

Frequently Asked Questions