CSCI 185: Fall 2023

Introduction to Programming for the Web

CSCI 185: Fall 2023

UNCA Logo

Fish by @akeatk

Activity: Background Images

Please download the exercise files (below).

Download Activity Files

1. Uncomment the relevant CSS properties

Open in-class-exercise and take a look at the HTML and CSS files to get oriented with them. Then, before making any changes to the code, preview the index.html page in your web browser.

After previewing your webpage, uncomment the following lines inside your styles.css file within your header style block.

  /* background-image: url('solar-eclipse.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: center; */

When you’re done, preview the page, noting what changed. You should now see a background image in your header of a solar eclipse.

Next, uncomment the following lines within your #section2 style block:

/* background-image: url('solar-eclipse-multiples.jpg');
background-repeat: no-repeat;
background-position: center right;
background-size: contain;
background-attachment: fixed; */

When you’re done, preview the page. You should now see a background image of a series of photos of an eclipse behind a box of white text. The image should be anchored as you scroll.

2. Add Custom Images

Customize this page with your own background images.

3. Try Out the Filters

If you have time, also try playing with some of the background filters. Here is a list of available filters (also on W3 Schools). The options for the filter property are:

Hint: try adding filter: invert(180); to the header style block in your CSS file to see what happens.

4. Try adding a video background