CSS tutorial series: Styling Images
Tags: beginners, webdev, css, programming
Published: 2023-01-28 18:58:51

Images are an important part of a web page, which is why it is crucial to know how styling images is done since it can impact the way they appear on your web page.

There are various CSS properties which help you style images. 

## how to center an image?
You can center an image by selecting it and setting both `margin-right` and `margin-left` to `auto` and giving it a width of `50%`. The `display` value of an image is `inline` by default so do not forget to change it to `block`.

```CSS
img {
  display: block;
  margin: 0 auto;
  width: 50%;
}
```

## Opacity on an image
We can use the property `opacity` on an image to define the transparency of your image as seen in the example below.

## How to make an image fit in its container?
As seen previously in the example below, we've used object fit to fit an image in its container using `object-fit` property. 

|Property| Values |
|--------|:------:|
| `object-fit`| `fill`, `contain`, `cover`, `none`, `scale-down`|

- The `fill` property value is the default which either will stretch or be squished or even resized to fit specified dimensions.

- The `contain` property will resize the image to fit within the specified dimension while maintaining its aspect ratio.

- The `cover` property value will clip the image to fit and fill the specified dimensions while preserving its aspect ratio.

- The `none` property value will not resize the image.

- The `scale-down` property value will size down your image between the `none` and `contain` property values.

```CSS
img {
  opacity: 0.5;
}
```

### Object position
With the `object-fit` property comes a long the `object-position` property which helps you display the part of the image that you want for example.

```CSS
img {
 height: 300px;
 width: 300px;
 object-fit: cover;
}
```

{% codepen https://codepen.io/fullstackjo/pen/mdjKYQz %}

## Background images 
By using the `background-image` property we can add a background image to a `<div>`. This property can sets one or multiple images as a background for an element.

```CSS
div {
  background-image: url("image.jpg");
```
This property comes with a handful of other properties such as: 

`background-repeat`, `background-position`, `background-size`, and `background-attachement`. 

- The `background-position` property specifies the starting point of the `background-image` property. This property has multiple values

| Values| 
|-------|
| `top left`, `left center`, `left bottom`, `right top`, `right center`, `right bottom`, `center top`, `center center`, `center bottom`, `x-axis position`, `y-axis position`, `x%`, `y%`, `initial`, `inherit`|

- The `background-repeat` property specifies if the background image will be repeated.

| Values| 
|-------|
| `repeat`, `repeat-x`, `repeat-y`, `no-repeat`, `initial`, `inherit`|

- The `background-size` property defines the size of the background image.

| Values| 
|-------|
| `auto`, `length`, `cover`, `contain`, `initial`, `inherit`|

- The `background-attachement` property specifies if a background scrolls along the page of is fixed.

{% codepen https://codepen.io/fullstackjo/pen/jOppEQv %}