Stats Preview Card Component with CSS Image Color Overlay

Hello fellow Mentee's,

For this project the banner image required a transparent color overlay. Initially, I placed the image in HTML. This however did not work very well when I began with the styling. The color overlay overflowed the height of the image and I was not able to correct it. Soon I figured out that there is an easier & efficient practice: I placed the image as a background-image property inside SCSS, but there was a problem...The image did not display on the browser. After some trial and error I realised that I used the wrong file path. After doing some research I gained some clarity. These are my notes:

• What is the difference between a folder and directory? A folder is a GUI object. Folders are essentially directories and directories hold files.

• It is important to note that the index.html always should be nested directly within the Root Directory, thus not in any subdirectories. You can visualize a Root Directory as a leader on top of a multi-level hierarchy structure with subdirectories below. When the Root Directory contains many nested subdirectories it resembles an upside down tree. The Root Directory (also named as the "Web Root"), is the publicly accessible base folder of a website. The Root Directory is marked by a / (slash) with Mac OS and Linux and a \ (backslash) with Windows.

Reminders when using "Relative File Paths":

• In which Directory is the file in which you're currently working on nested in?
  • The location of the file you want to link to is relative to the location of the file you want to link it from.
• If the file you want to link to is in the same Directory use:
  • ./
    • you can also just type "example.jpg"
• If the file you want to link to is outside your current working directory use:
  • ../
    • This means "leave the current folder and go to it's parent folder". The more ../../../ you use the further back you go.
• If you directly want to go to the Root Directory use:
  • /

The translation of the relative path below is: "leave this current Directory, then go to the folder images, and then select the file image-header-mobile.jpg".

.card_image {
      background-image: url("../images/image-header-mobile.jpg");
      background-size: cover;
      height: 15rem;
      width: 100%;
      border-radius: 8px 8px 0 0;
      position: relative;
      @media screen and (min-width: $desktop) {
        background-image: url("../images/image-header-desktop.jpg");
        grid-column: 2/3;
        grid-row: 1/2;
        height: 100%;
        border-radius: 0 8px 8px 0;
      }
      .card_image-overlay {
        position: absolute;
        inset: 0;
        background: $overlay_clr;
        opacity: 0.75;
        mix-blend-mode: multiply;
      }
    }