03. Code from 02/26/2026

Introduction

Below are some snippets from class from 02/26/2026. These were things people mentioned in class during their progress presentations. All the examples are linked in this link if you want to see it working, but explained below.

Links to Demo Pages

How image in the background works

The image in the background simply uses an image as the background of your html element.

In the page we have a main element, that holds all our text (this shows everything in the body tag).

<body>
    <main>
        <h1 class = "tomorrow-bold"> Image in Background Example</h1>
        <p class = " tomorrow-regular">
            This example shows that you can have
            the background take up the whole page via CSS. 
        </p>
        <p class = "tomorrow-regular">
            The image is "Bliss" the default 
            Windows XP background 
            <a href = "https://cdn.arstechnica.net/wp-content/uploads/2023/06/bliss-update.jpg" target = "_blank">
            from here
            </a>
        </p>
    </main>
</body>

and then we say that the main element, has an image as its background, and that it should take up the whole page, with CSS:

main
{
    background-image: url("https://cdn.arstechnica.net/wp-content/uploads/2023/06/bliss-update.jpg");
    
    /* make it take up the whole screen */
    width : 100vw;
    height: 100vh;
}

Image Carousel

On the page linked above, you can find a simple image carousel. You do not need to understand everything that happens on the page, but here's the elements that you need to know about it:

you need to have a class called carousel-wrap that holds the carousel
a class for the left button called left
a class for the right button called right
the element that holds everything is called the track

And then in your CSS, you should adjust the following to your porject:

.carousel
{   
    /* total carousel width */
    width   : 450px;
    overflow: hidden;
}

.track
{
    display   : flex;
    /* gaps between images*/
    gap       : 10px;
    transition: transform .25s;
}

.track img
{
    /* size of images */
    width      : 150px;
    height     : 150px;
    object-fit : cover;
    flex-shrink: 0;
}

The last thing is the javascript. You shouldn't have to touch the main code, but you might need to adjust these settings based on your project:

// change these numbers as they fit your project
let   offset         = 0;
const step           = 5;
//how many images 
const images         = 10;   
// 150 + 10 gap
const image_width    = 160;  
const carousel_width = 450;  

// change to "pixel" if you want 5px movement
let mode = "element"