Computer Science 318

Fundamentals of Web Design

Lab 06 Background Images & Videos



Background Image CSS



Instead of using an <img> element in the HTML an alternative is using the CSS property background-image. Keep in mind that background images are not semantic HTML tags, therefore screen readers will not announce the presence of background images. Background images should only be used for decoration and not critical information.

Above is an example of the CSS declaration for a single background image.

Hint: You will need url or file path to tell the browser the source of the image. If you place the image within an images folder remember to indicate that in your path.

background-image:url(images/image1.jpg), url(images/image2.jpg);

Background-image you can have more than one image in the declaration. To do this you will separate the images with commas like above. They will be displayed in the order they are in the CSS declaration.

background-repeat: repeat;


Defines how background images are repeated. A background image can be repeated along the horizontal (x) and vertical (y) axes, or not repeated at all.

Values for background-repeat:

When defining the background-repeat for multiple images use commas to separate the values.

background-repeat: repeat;
background-position: top;


Defines the position of the background image within the element.

Background-position: has a variety of values that can be used to define the image's position. By default all images start in the top left corner of the HTML element they are assigned to.

Values for background-position:

When defining the background-position for multiple images use commas to separate the values.

background-repeat: repeat;
background-position: top;


Values for background-size:

When using one value with background-size the value is the width size and the height is scaled accordingly, if there are two values the first is the width and the second is height.

When defining the background-size for multiple images use commas to separate the values.

CSS Pseudo-Classes


A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it. In the CSS example above the button would be blue, except when the user hovers their cursor over the button, then it would turn red.

There are many different types of pseudo classes. Here is a list of all possible pseudo classes. Below are some of the most basic pseudo classes, we will be adding more to our repertoire in future labs.

Location Pseudo Classes

These pseudo-classes relate to links, and to targeted elements within the current document.



User Action Pseudo Classes

These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.



Embedding a Video

Embedding a video iframe from Youtube is very easy. Follow these instructions to accomplish it.

Locate the video you would like to embed.

Click on the share icon below the video.

Lab 6 youtube share button

In the share options click on embed

Lab 6 Youtube share options

Copy the iframe code.

Lab 6 youtube copy iframe

Paste the iframe into your HTML document were you want the video to appear.

Lab 6 youtube iframe pasted

Now you will be able to see the video in the browser

Lab 6 video embedded


Experiment Try setting the background-repeat to no repeat, background-size to contain, and background-position to center in the demo below.


<h1>CS 318</h1>


body{ background-image:url(; } h1{ background-color:white; }


Pick a topic you would like to make three different web pages for. (Must be a different topic than lab 3)

Open GitHub Desktop (you may need to download the program again if the computers get wiped.)

Couple of things to check in GitHub Desktop.

With your cs-318 repository selected, Click open in Visual Studio code.

Create a new folder called lab6

Create a new file called index.html plus two others you will need to name in the lab6 folder

Setup your HTML files

Create your stylesheet

Link your stylesheet to the HTML

Required HTML Elements
embedded video

Optional HTML Elements

Required CSS Properties

Optional CSS Properties

Pseudo Classes
You are required to use at least one pseudo class in your CSS


Once you are satisfied with your work, go through the final checklist.

Final Steps

Validate your HTML.

Lint your CSS at

Now look at GitHub Desktop. You should see all of your files listed out in the left column.

GitHub Desktop files listed

Now you are going to commit your changes.

With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.

GitHub Desktop Summary field.

Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab6 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"

GitHub Push Origin

Your are Done with Lab6

Are you someone who needs to double check that it worked? If you want to make sure the push was successful click on the "View on GitHub" button from GitHub Desktop. It will open up your repository in the browser. From there you should be able to see all of your files.

...What if I need to make a change after pushing?

So let's say you have already pushed but noticed an error. No worries, this is easy to fix.

In visual studio code make any changes you need to. Once you are done making corrections. Save.

Go back to GitHub Desktop. You should see your changes to the documents listed there.

GitHub fixing an error.

Fill out the Summary field again. I suggest saying what you fixed. For example: "Fixed paragraph error on Sea-Jellies"

Click "Commit to main"

Click "Push Origin" and you are done.