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
• background-image
• background-size
• background-repeat
• background-position
• background-origin
• background-clip
• background-attachment
• background-color
• Short hand
• Conclusion

YouTube :

All Properties

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

What are background properties?

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

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.

   <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 ->

.container{
  height : 100vh;
}

download images for the project.

1. Images are on my GitHub repository
2. Visit & copy the link ☝️
3. Go to downgit & paste the link you copied
4. Follow the steps on the video 👇 ->

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

Let's start coding 😊

background-image

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

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 👇

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

To locate the file path of the kitty.png, write on style.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

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 👇 ->

 .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.

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 👇

 .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 👇

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

//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

background-size

We can adjust size of an image using this property.

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]

Cover

For this to work, we must include an image, set height & stop the image repetition. Like this on 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 👇

Contain

Same steps here, we must include an image, set height & stop the image repetition. Like this on 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 👇

Image width & height

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

The syntax 👇

.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 ->

.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 :

background-repeat

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

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]

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 :

.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

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

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

no-repeat

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

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

round

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

background-position

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

The syntax 👇

.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

.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 ->

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 ->

.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 ->

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

.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 ->

background-origin

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

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.

The result of every property at a glance ->

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 ->

.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

background-clip

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.

The 4 values are :

• border-box
• padding-box
• content-box
• inherit

The result of every property at a glance ->

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 ->

.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

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

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 👇

I got this pen from

background-color

This is used to fill your background with colors

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 ->

.container{
   background-color : red;

   height : 100vh;
}

or, you can use hex color code like this ->

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

   height : 100vh;
}

Visit these resources for more colors ->

coolors.co
flatuicolors.com

RBG() color function

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

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

   height : 100vh;
}

or, you can use RGBA() to set both color & opacity->

.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 👇

linear-gradient() function

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

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

uigradients.com

To recreate this background color ->

'#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 ->

.container{

   background: linear-gradient(90deg, #22c1c3, #fdbb2d);  

   height : 100vh;
}

Short-Hand

This is the order of the shorthand named background

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 ->

.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 ->

.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 🥰

kitty Avatar

Cute panda

cute cat with duck

cute girl illustration

Rabbit with duck

CSS-Tricks

Conclusion

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

Suggestions & Criticisms Are Highly Appreciated ❤️

• YouTube / Joy Shaheb

• Twitter / JoyShaheb

• Instagram / JoyShaheb