HTML Images

The Image Tag

<img src='img/pic.jpg' alt="This is a cityscape">

It's a good idea to make img's width 100% so they fit their containers

img {
    width: 100%;
}

Setting div backgrounds to an image with CSS

You can set an image as the background of a div. Setting 2 backgrounds separated by a comma allows you to set a fallback if the first background (the img) doesn't work

.mountains {
    background: url('../img/mountains.png'), red;
}

Background Position

.mountains {
    background-position: 50% 50%;
}

Background Repeat

.mountains {
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-repeat: repeat;
    background-repeat: space;
    background-repeat: round;
    background-repeat: no-repeat;
}

Background Size

.mountains {
    -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;

          background-size: contain;
}

Position CSS Property

In order for us to make a card UI element, we need to know about the position css property.

.card-description {
    position: static;
    position: relative;
    position: absolute;
    position: fixed;
    position: sticky;
}

Check out MDN's descriptions here:

https://developer.mozilla.org/en/docs/Web/CSS/position

But to make a practical summary of it: static is the default and what we usually work with. If we need to position something at the side or bottom of an element, we usually make the container element position: relative, and then position the inside element absolutely.

If we want to make a stick nav, that is accomplished with position: fixed.

6 HTML Images