# Understanding Background Images And Images

## Understanding `background-size`

The `background: url("");` property we have been using is actually a shorthand and can be replaced with `background-image: url("");`. 

We can also use `background-color` to set a solid color.

For sizing, we can use the `background-size` property, which takes in a couple of values. If we set `background-size: 100px` to a fairly larger element, the image will be repeated.

We can disable the repeatition of image using the `background-repeat` property, we can assign it `no-repeat` to remove the repeatition, or we can use the other possible values `repeat-x` and `repeat-y`, to repeat the imaage horizontally or vertically.

If you only assign a single value to `background-size` property, which is the `width` of the image, the `height` will be set automatically to maintain the aspect ration of the image. or you can assign both, `width` and `height`, e.g.` background-size: 300px 100px;`.

We can also use `auto` (default, keeps the aspect ratio), `cover` (fills the entire container), `contain` (entire image is visible, can leave white space), `%` and other units with the `background-size` property. e.g. setting `background-size: 50%` will make the image take 50 percent of the element's width.


## Working With `background-position`

Excess parts of the image, that are cut-off for a larger image than the container, can be controlled using the `background-position` property. That is, you can decide which side of the excess image to crop. We can also control the absolute positioning of the image inside the container.


We can see the available usage of the this property on its [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position).


## Theory Time - `background` Shorthand

* `backgound-image` (Set one or more background images)
* `backgound-color`   (Set a background color)
* `backgound-position`    (Set initial position, relative to background position layer)
* `backgound-size`    (Set size of background image)
* `backgound-repeat`  (Defines how background images are repeated)
* `backgound-origin`  (Set background positioning area)
* `backgound-clip`    (Define whether background extends underneath border)
* `backgound-attachment`  (Sets the scrolling behavior of the background image)


## Using The `background` Shorthand

```css
background: url("a.jpg") left 10% bottom 20%/cover no-repeat border-box padding-box;
```


## Styling Images

The default behavior is when you add an `<img>` tag and set an image, the `width` and `height` of the `<img>` will be same as of the width and height of the original image. Changing the `width` and `height` of the container element doens't have any effect on the size of `<img>`.

Changing lets say `height` of the `<img>` to `100%` will not change it height to fill the container, but it'll change its height to that of the original image used, unless the container is an `inline` or `inline-block`.


## Working On The Image Layout

```html
<main>
    <div>
        <div class="testimonial" id="customer-1">
            <div class="testimonial__image-container">
                <img src="../images/customer-1.jpg" alt="Mike Statham - Customer" class="testimonial__image">
            </div>
            <div class="testimonial__info">
                <h1 class="testimonial__name">Mike Statham</h1>
                <h2 class="testimonial__subtitle">Founder of
                    <a href="tech-analysis.com">tech-analysis.com</a>
                </h2>
                <p class="testimonial__text">uHost helped me realize my project with a highly constrained budget in like no time.</p>
            </div>
        </div>
        ...
    </div>
<main>
```

```css
.testimonial__image-container {
    width: 65%;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}

.testimonial__image {
    width: 100%;
    vertical-align: top;
}
```

## Understanding Linear Gradients

Gradients, both linear and gradial, are treated as images. We add a linear gradient by using the `linear-gradient()` css function on `background-image` or `background` shorthand properties. 


## Applying Radial Gradients

We add radial gradient using the `radial-gradient()` css function.


## Stacking Multiple Backgrounds

Using the shorthand `background` property, we can stack multiple backgrounds separated by a comma `,`. You can only set the `background-color` property once when stacking multiple backgrounds.

```css
background: linear-gradient(to top, rgba(80, 60, 18, 0.6) 10%, transparent), url("image.jpg") left 10% bottom 20%/cover no-repeat border-box, #ff1b68;
```


## Understanding Filters

Filters allow us to change the visual appearence of an element by applying a `filter` like blurring, grayscale or changing the contrast etc:

```css
div {
    background: brown;
    filter: blur(10px);
}
```


## Adding And Styling SVGs - The Basics

...