DEV Community

Cover image for Every CSS Background Property illustrated 2021 || CSS 2021
Joy Shaheb
Joy Shaheb

Posted on • Updated on • Originally published at freecodecamp.org

Every CSS Background Property illustrated 2021 || CSS 2021

#css #tutorial #webdev #beginners

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

Table of Contents -->

YouTube :

All Properties

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

Alt Text

What are background properties?

Alt Text

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

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Down Git Video

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

Alt Text

Let's start coding 😊

background-image

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

Alt Text

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

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

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;
 }
Enter fullscreen mode Exit fullscreen mode
  • 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

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;
 }
Enter fullscreen mode Exit fullscreen mode
  • 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

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;
 }
Enter fullscreen mode Exit fullscreen mode

By Direct Link

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

Alt Text

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;
 }
Enter fullscreen mode Exit fullscreen mode

Take a Break

Alt Text

background-size

We can adjust size of an image using this property.

Alt Text

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Cover

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Contain

Image width & height

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

Alt Text

The syntax 👇

.container{
// here, we see  width👇  &  👇 height
  background-size : 200px   200px;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

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

Round

Space

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

no-repeat

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

Alt Text

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

round

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

Round

background-position

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

Alt Text

The syntax 👇

.container{
// This is       X-Axis👇  &  👇 Y-Axis
background-position : 300px  200px;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

The Result ->

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

The Result ->

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

The Result ->

Alt Text

background-origin

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

Alt Text

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

The result of every property at a glance ->

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Take A Break

Alt Text

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.

Alt Text

The 4 values are :

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

The result of every property at a glance ->

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

background-attachment

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

Alt Text

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

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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

   height : 100vh;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

This is an experiment with the color named 'Eton blue' with various opacity levels 👇

Alt Text

linear-gradient() function

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

Alt Text

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

uigradients.com

To recreate this background color ->

Alt Text

'#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;
}
Enter fullscreen mode Exit fullscreen mode

Short-Hand

This is the order of the shorthand named background

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

The code snippet using the shorthand ->

.container{

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

   height : 100vh;
}
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

Top comments (2)

Collapse
 
afif profile image
Temani Afif •

(1) for background-position, you can also use the following syntax right 10px bottom 50px for example. You can specify the origin and the offset from the origin (this works in all the direction). Don't forget that we also have the center keyword. Also pay attention to the precentage values, it doesn't work the way you are showing it (or let's say, it's not clear enough if we see the figure). Here is a good article detailing all these: dev.to/afif/all-you-need-to-know-a...
(2) you are talking about gradient after talking about background-color and you are listing it as potential value of background-color. This is wrong and can be missleading as we may think that a gradient is a color that can be applied to background-color whereas it's an image and should be applied to background-image instead. You need to move the linear-gradient part when talking about image to avoid confusion. Worth to note that everything that apply to an image also apply to a gradient.
(3) I have to strongly disagree with the shorthand description you are giving because the order is not important. Simply said, there is no order and we can have any combination. If you follow the formal syntax in the MDN: developer.mozilla.org/en-US/docs/W... you will notice the use of || which means any order (developer.mozilla.org/en-US/docs/W...). The only requirement when using the shorthand is the use of background-size that must follow the background-position with / (ex: top left/100px 100x, related: stackoverflow.com/a/54055521/8620333
(4) background-size also accept percentage value and not only pixel value
(5) background-repeat accept two values (developer.mozilla.org/en-US/docs/W...) and each one-value syntax has an equivalent (even if the two-value syntax is not very common)
(6) another very important feature of background is the use of multiple background layer and you are omitting this part here. All the properties you listed accept values separated with , to define different layers.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 •

Astonishing quality but.... Background hasn't changed alot in years, the only thing that's new is backdrop filter which is genuinely interesting

Read next

shilleh profile image

How to Use L298N Motor Driver with Raspberry Pi Pico W

Shilleh -

charlottetowell profile image

Creating a NextJS Web App With 0 Web Dev Experience

Charlotte Towell -

deniel_davenatividad_f4f profile image

Unlock the Power of the Cloud: Deploy Your Django App on AWS EC2

Deniel Dave Natividad -

lithephp profile image

Lithe Crypt: Simplifying Encryption in PHP Applications

Lithe -