Every CSS Background Property illustrated 2021 || CSS 2021
Tags: css, tutorial, webdev, beginners
Published: 2021-04-03 01:25:22

Today we're gonna learn all CSS **background** properties with every possible **value** along with **short-hand.** Let's Go !🏅

# Table of Contents -->
   * [All Properties](#level-1) 
   * [background-image](#level-2) 
   * [background-size](#level-3) 
   * [background-repeat](#level-4) 
   * [background-position](#level-5) 
   * [background-origin](#level-6) 
   * [background-clip](#level-7)
   * [background-attachment](#level-8)
   * [background-color](#level-9)
   * [Short hand](#level-10)
   * [Conclusion](#level-11)


# YouTube :

{% youtube hwJKjsZUPjY %}


# All Properties <a name="level-1"></a>

This is a list of **All properties** we're gonna discuss today. The red colored text at last is the **shorthand**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l25y304vndphll4795hr.png)


## What are background properties?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iic3rs5ewx8c9xp6vryq.png)


CSS Background properties allows us to **control** the **size & properties** of **images** in a way that we can make **responsive images** for both smaller & larger screens. Thus, we can easily create responsive websites.

**For an example,** 

   * The property **background-size** allows us to reset **width & height** of our image according to screen size. 
   * **background-position** allows us to tell the browser, where to put the image on the screen. 
   * And many more !



## Steps to follow 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u72rvfe5181640ikqa32.png)

Before coding, you need to know little bit of HTML,CSS & how to use VS code.

To do all sorts of test with the properties & its values, follow these steps 👇

   1. Create a new folder named 'BACKGROUND-PROJECT'. Open it on VS code.
   2. Create index.html & style.css files. 
   3. install 'live server' on VS code.
   4. start live server. 

## HTML

create one div with class name 'container' inside the **body tag** on the HTML file.

```HTML 
   <div class="container"></div>
```

## CSS

On CSS, you **MUST** include a height for our container, otherwise we **can't see the image**. For our case, we will set it to 100vh, like this ->

```CSS 
.container{
  height : 100vh;
}
```

## download images for the project. 

   1. Images are on my **[GitHub repository](https://github.com/JoyShaheb/Project-image-repo/tree/main/Background-property-images)**
   2. Visit & copy the link ☝️
   3. Go to [downgit](https://minhaskamal.github.io/DownGit/#/home) & paste the link you copied
   * Follow the steps on the video 👇 ->

![Down Git Video](https://cloud.githubusercontent.com/assets/5456665/17822364/940bded8-6678-11e6-9603-b84d75bccec1.gif)



And..... we're all set !

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmf39ig7wzdiunfje9lr.png)

Let's start coding 😊








# background-image <a name="level-2"></a>

Using this property, we can add images **through our stylesheet.**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhoch2auowlf2xdf4h8f.png)

We can use background-image by **2 ways** ->
   * By locating **image path** on directory 
   * By specifying **image URL**


### By Directory Path

The syntax when using the directory path 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jfuda4p0ki1hish775o.png)

We will have 3 cases when specifying an image path on our CSS ->
   1. image & style.css are on same folder
   2. image is on the next folder
   3. image is on the previous folder



   * **When** image & style.css is on **Same Folder**, it looks something like this 👇 Notice that **kitty.png** & **style.css** are on same parent folder named **Background-project**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cdbwdmaz6uy92sg0ln6.png)


To locate the file path of the kitty.png, write on style.css ->

```CSS 
 .container{
   background-image : url("kitty.png");
   
   height: 100vh;
// set size & stop image repetition 
   background-repeat : no-repeat;
   background-size : contain;
 }
```

   * **When** image is on **Next Folder**, the style.css is on previous folder. Notice on the image 👇 the kitty.png is on Assets folder while style.css is on previous folder

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3xxog8e6ffex60mg5vd.png)


To Go forward & to locate the file path of the kitty.png, we write one dot & slash (./) after quote on style.css. Then we write name of folder then slash(/) then write name of image, like this 👇 ->


```CSS 
 .container{
   background-image : url("./Assets/kitty.png");

   height: 100vh;
// set size & stop image repetition 
   background-repeat : no-repeat;
   background-size : contain;
 }
```


   * **If** image is on **Previous Folder**, then we need to go back. Notice on the image 👇 **style.css** is on **src** folder & **kitty.png** is **outside src folder.**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09ychw7fmlm1uud5fy7w.png)

To Go back & to locate the file path of the kitty.png, we write two dot & slash (../) after quote on style.css. Then we write name of image, like this 👇

```CSS 
 .container{
   background-image : url("../kitty.png");

   height: 100vh;
// set size & stop image repetition 
   background-repeat : no-repeat;
   background-size : contain;
 }
```


### By Direct Link 

This is pretty easy. Write the property & insert the link inside url(). The syntax 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szxp3jqyjyksrep1ep82.png)

To work with an image which is a **direct link** we write ->

```CSS 
//example ->
 .container{
    background-image : url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szxp3jqyjyksrep1ep82.png");

  height: 100vh;
// set size & stop image repetition 
   background-repeat : no-repeat;
   background-size : contain;
 }
```






### Take a Break

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4diremjrrbvcm2o4l77m.png)




















# background-size <a name="level-3"></a>

We can adjust size of an image using this property.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxbrgckb20fy8tmrg9ik.png)



You can use background-size by **3 ways** ->
   * use Cover / Contain value
   * set image width & height
   * use auto 




Let's start discussing the **cover & contain values**
Bear size : [718px X 614px]

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uixn5c8mrafpmlhth9iy.png)


### Cover

For this to work, we must include an image, set height & stop the image repetition. Like this on css 👇

```CSS
.container{
  background-image : url('cute-bear.png');
  background-repeat: no-repeat;
  background-size : cover;

// Must include the height
  height : 100vh;
}
```


When we use this property, it will stretch the image to the whole screen even when we resize the window. Watch the video 👇

![Cover](https://media.giphy.com/media/9OdZ0B1wjO1kdofBBu/giphy.gif)



### Contain

Same steps here, we must include an image, set height & stop the image repetition. Like this on css👇

```CSS
.container{
  background-image : url('cute-bear.png');
  background-repeat: no-repeat;
  background-size : contain;

// Must include the height
  height : 100vh;
}
```


This value will **preserve** the image size [**Responsive Image**] even when we **resize** the window. See this video below 👇

![Contain](https://media.giphy.com/media/VaqDcSh38DTz7YbV6p/giphy.gif)



### Image width & height

We can set width & height of image using background-size property.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36p9azoztkvawbvy6244.png)

The syntax 👇

```CSS
.container{
// here, we see  width👇  &  👇 height
  background-size : 200px   200px;
}
```

Also, don't forget to insert the image, set height and stop the image repetition. The code snippet ->

```CSS
.container{
  background-image : url('cute-bear.png');
  background-repeat: no-repeat;

// here, we see  width👇 &  👇 height
  background-size : 200px  200px;

// Must include the height
  height : 100vh;
}
```


### Auto

When using this value, the image will stay on it's original size. It won't change when we resize the window. See the video :

![](https://media.giphy.com/media/hHc7ZhU7BB4NX8gLRR/giphy.gif)



















# background-repeat  <a name="level-4"></a>

This property allows us to repeat the same image multiple times.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/629rnxirqrdr8p5fapcd.png)

There're 6 values of this property : 


   * repeat
   * repeat-x
   * repeat-y
   * no-repeat
   * space
   * round

Result of every 6 value at a glance :
**Note:** kitty  size : [200px X 200px]

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jj2jwfwh0pboqpylkeq0.png)

![Round](https://media.giphy.com/media/3BUBxpCxmcDrBN4aZF/giphy.gif)

![Space](https://media.giphy.com/media/cO0jNSpVi0I3FWD62G/giphy.gif)

Now, Let's investigate what's happening with each value. BUT, before that note that we need to insert an image using background-image. Like this :

```CSS
.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat :  ; //we will play with values here 

   height : 100vh;
}
```


### repeat

By using this value, we can repeat the same image multiple times along **BOTH X & Y Axis** as long as the screen space doesn't end. Kitty size : 200px X 200px

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26zsa1dn161pawjqxuqp.png)


### repeat-x

This value allows us to repeat the same image multiple times along the **X-Axis** as long as the screen space doesn't end. Kitty size : 200px X 200px

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pl4znzrwcevpr5w1a4i5.png)



### repeat-y

works the same way like "repeat-x", but works along the **Y-Axis** as long as the screen space doesn't end. Kitty size : 200px X 200px

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yo3i3bp8cw2r6zqhtvm.png)



### no-repeat

We can have our original image without repetition using this value. Kitty size : 200px X 200px

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2okgurnuakrnqbyv6kr.png)


### space

This works both along the X & Y Axis. We can see The main difference between values :  **space & round** when we resize the window. Notice that we have **empty spaces** when we resize the window

![Space](https://media.giphy.com/media/cO0jNSpVi0I3FWD62G/giphy.gif)


### round

This works both along the X & Y Axis. Notice that the image is **stretching** when we resize the window. 

![Round](https://media.giphy.com/media/3BUBxpCxmcDrBN4aZF/giphy.gif)



















# background-position  <a name="level-5"></a>

This property is used to change position of an image on the screen

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4ndvr71f0yl9c44kbc7.png)


The syntax 👇

```CSS 
.container{
// This is       X-Axis👇  &  👇 Y-Axis
background-position : 300px  200px;
}
```

Also, don't forget to insert the image, set height, & stop image repetition. We've set the kitty size to 200px X 200px using background-size property


```CSS
.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// This is         X-Axis👇  & 👇 Y-Axis
  background-position : 300px 200px;
  height: 100vh;
}
```
The Result ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65p2htkztmijbm1hxlug.png)


You can also use combination of these values ->
   * top
   * left
   * right
   * bottom
   * percentage values

For an example, let's set our kitty at the very bottom right. The code snippet for this -> 

```CSS
.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// This is         X-Axis👇  & 👇 Y-Axis
  background-position : bottom right;
  height: 100vh;
}
```
The Result ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga6veuh8ea3yzq7nend2.png)

Calculating the available space of the screen, the % values determine the position of the image. The code snippet ->

```CSS
.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// This is         X-Axis👇  & 👇 Y-Axis
  background-position : 25% 15%;
  height: 100vh;
}
```

The Result ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fazbxgdpkqeomum02qv7.png)























# background-origin  <a name="level-6"></a>

This property allows us to set the origin of our image across the CSS box model. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wc2b6ypgcfdtol6am14g.png)


The 4 values are :
   * border-box
   * padding-box
   * content-box
   * inherit

In the standard CSS box model, the outermost part is the border, then comes the padding and finally we have the content itself at the center. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3mdn6hpd1u892akrkj5.png)

The result of every property at a glance ->


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27ptyulhvxqi4idrw68n.png)


To recreate these results, 
   * First we need an image, stop image repetition, set height & width of **both container & image.**
   * Once done, we will insert 40px padding, otherwise we can't see the **difference** between padding-box & content box.  
   * Then, insert 25px red colored border. set, border-style to dashed to see **dashed border** on screen.
   * set background-size to 400px & 400px;

The code snippet ->

```CSS
.container{
  background-image: url('cute-girl.png');
  background-repeat: no-repeat;
  background-size: 400px 400px;

// Change  values here  👇  to see difference 
  background-origin: border-box;
  padding: 40px;
  border: 25px solid red;
  border-style: dashed;

// Width & height for container 👇
  width : 400px;
  height : 400px;
}
```










# Take A Break

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yahewko7hckdgp7p4xux.png)


















# background-clip <a name="level-7"></a>

This is the same as background-origin property. The main difference is, background-clip **CUTS** the image to fit inside the Box & background-origin **PUSHES** the content inside the box to fit. 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4ga97rke3kgppd7qlxn.png)


The 4 values are :
   * border-box
   * padding-box
   * content-box
   * inherit


The result of every property at a glance ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgd6sh8237bmvpnujl8r.png)


To recreate these results, 
   * First we need an image, stop image repetition, set height & width of **both container & image.**
   * Once done, we will insert 40px padding, otherwise we can't see the **difference** between padding-box & content box.  
   * Then, insert 25px red colored border. set, border-style to dashed to see **dashed border** on screen.
   * set background-size to 400px & 400px;


The code snippet ->

```CSS
.container{
  background-image: url('cute-girl.png');
  background-repeat: no-repeat;
  background-size: 400px 400px;

// Change  values here  👇  to see difference 
  background-clip: border-box;
  padding: 40px;
  border: 25px solid red;
  border-style: dashed;

// Width & height for container 👇
  width : 400px;
  height : 400px;
}
```








# background-attachment  <a name="level-8"></a>

This property allows us to control the behavior of our content & image **when we scroll.**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1xx67vtt5w3c861sskx.png)

The 3 values are : 
   * scroll
   * fixed
   * local

when we use **scroll**, image is fixed, we can freely scroll our content. **fixed** value gives us a parallax effect on mouse scroll & **local** produces multiple images as long as our content doesn't end. 

See the results live here 👇

{% codepen https://codepen.io/ematte/pen/GRjJjro %}


[I got this pen from](https://dev.to/hadrysmateusz/learn-all-8-background-css-properties-in-5-minutes-2lk4)




# background-color <a name="level-9"></a>

This is used to fill your background with colors

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mh7pe7phpj2vrvz304ma.png)

Out of many options, popular ones are ->
   * solid color by name or hex value
   * using RGB() color function
   * using linear-gradient() function

### solid color by name or hex value

You can use color names to set background color, like this ->

```CSS
.container{
   background-color : red;

   height : 100vh;
}
```
or, you can use hex color code like this ->

```CSS
.container{
   background-color : #ff0000; //red color

   height : 100vh;
}
```
Visit these resources for more colors ->

[coolors.co](https://coolors.co/)
[flatuicolors.com](https://flatuicolors.com/)

### RBG() color function

you can use RGB() color function to set background color ->

```CSS
.container{
// color name is "American River"
   background-color : rgb(99, 110, 114);

   height : 100vh;
}
```
or, you can use RGBA() to set both color & opacity->

```CSS
.container{
// The 0.5 at last represents        50% 👇 opacity 
   background-color :  rgba(99, 110, 114, 0.5);

   height : 100vh;
}
```
This is an experiment with the color named 'Eton blue' with various opacity levels 👇 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzc82sudq8es7ocok12g.png)



### linear-gradient() function

this is used to create a gradient color of more than 1 color. Example of gradient colors -> 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0j3e3r6kobycowckdxg.png)

You can visit this website for more color resources with css code snippets ->

[uigradients.com](https://uigradients.com/#Summer)


To recreate this background color ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkf21o97m7gqzpme810k.png)

'#22c1c3' represents the color on left, '#fdbb2d' represents color on right. '90deg' is telling how the 2 colors will be angled to create a gradient.
The code snippet ->

```CSS
.container{
 
   background: linear-gradient(90deg, #22c1c3, #fdbb2d);  

   height : 100vh;
}
```




# Short-Hand 

This is the order of the shorthand named background

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/newvcc4rvegnbkblwzyb.png)



For this experiment, let's put the kitty.png on our browser with a blue background at 200px on X-Axis & 200px on Y-axis. The code snippet -> 


```CSS
.container{
 
   background-color : skyblue;
   background-image : url('kitty.png);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: 200px 200px;

   height : 100vh;
}
```
The code snippet using the shorthand ->

```CSS
.container{
 
   background: skyblue url('kitty.png) no-repeat fixed 200px 200px;

   height : 100vh;
}
```

If you want to skip one value, you can do it as long as maintain the order of these properties.


# Credits

[Cute Girl I have a crush on 🥰](https://www.pexels.com/photo/woman-lying-on-plants-2125610/)

[kitty Avatar](https://www.flaticon.com/packs/kitty-avatars-3)

[Cute panda](https://www.freepik.com/free-vector/cute-bear-is-happy-cartoon-illustration_12341167.htm#position=4)

[cute cat with duck](https://www.freepik.com/free-vector/set-happy-cute-cats-cartoon-illustration_12566295.htm#position=11)

[cute girl illustration](https://www.freepik.com/free-vector/young-girl-different-gestures-cartoon-illustration_12566309.htm#page=1&position=22)

[Rabbit with duck](https://www.freepik.com/free-vector/set-cute-rabbit-with-duck-feel-happy-sad-cartoon-illustration_12573654.htm#position=7)

[CSS-Tricks](https://css-tricks.com/almanac/properties/b/background/)




# Conclusion

Here's Your Medal For reading till the end ❤️

## Suggestions & Criticisms Are Highly Appreciated ❤️

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/usxsz1lstuwry3jlly4d.png)



   * **YouTube[ / Joy Shaheb](https://youtube.com/c/joyshaheb)**

   * **Twitter[ / JoyShaheb](https://twitter.com/JoyShaheb)**

   * **Instagram[ / JoyShaheb](https://www.instagram.com/joyshaheb/)**