CSS Background (All Properties)

Please Share On:

The CSS Background properties are used to define the background effects.

There are various CSS background properties which are listed below:

Background PropertiesDescriptions
1. background-attachmentSet background image
2. background-blend-modeSet the background blending mode with color/image
3. background-clipSpecify the background extend area
4. background-colorSet background color
5. background-imageSet background image
6. background-originSet the background origin position
7. background-positionSet the background position
8. background-position-xSet the background x-position
9. background-position-y Set the background y-position
10. background-repeatSet the background repeated image
11. background-repeat-x Set the background x-repeated image
12. background-repeat-y Set the background y-repeated image
13. background-size Set the background size

1. background-attachment:

background-attachment can be scroll | fixed | inherit. Syntax of using background-attachment is shown below:

body
{
background-attachment: scroll;
}

body
{
background-attachment: fixed;
}

body
{
background-attachment: inherit;
}


2. background-blend-mode:

CSS background-blend-mode values are:

  • color
  • color-burn
  • color-dodge
  • darken
  • difference
  • exclusion
  • hard-light
  • hue
  • lighten
  • luminosity
  • multiply
  • normal
  • overlay
  • saturation
  • screen
  • soft-light

Example:

body
{
background-color-blend: normal;
}

3. background-clip:

CSS background-clip values are

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

Example:

body
{
background-clip: content-box;
}

4. background-color:

CSS background-color can be defined as following:

  • Color
  • HEX value
  • RGB value
  • RGBA value
  • HSL value
  • HSLA value

Example:

Color:

body
{
background-color: pink;
}

HEX value:

body {
  background-color: #ff00e1;
}

RGB value:

body {
  background-color: rgb(21, 46, 74);
}

RGBA value:

body {
  background-color: rgba(21, 24, 24, 0.6);
}

HSL value:

body {
  background-color: hsl(49, 23%, 21%);
}

HSLA value:

body {
  background-color: hsla(39, 23%, 21%, 0.6);
}

5. background-image

background-image property is used to set a background image in the webpage.

Example:

body {
  background-image: url("my-background-image.png");
}

6. background-origin

background-origin value are

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

Example:

body {
  background-origin: content-box;
}

7. background-position

Some useful background-position values are listed below:

  • center
  • left
  • right
  • center top
  • center center
  • center bottom
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom

Example:

body { 
  background-position: center; 
}

8 & 9. background-position-x & background-position-y

background-position-x and y can be defined by following values:

  • keyword values
  • percentage values
  • length values
  • side-relative values
  • multiple values
  • global values

keyword values:

/*For x-axis*/
body
{
background-position-x: left;
background-position-x: center;
background-position-x: right;
}


/*For y-axis*/
body
{
background-position-y: left;
background-position-y: center;
background-position-y: right;
}

percentage values:

/*For x-axis*/
body
{
background-position-x: 50%;
}

/*For y-axis*/
body
{
background-position-y: 50%;
}

length values:

/*For x-axis*/
body
{
background-position-x: 2cm;
background-position-x: 10px;
background-position-x: 2em;
}

/*For y-axis*/
body
{
background-position-y: 2cm;
background-position-y: 10px;
background-position-y: 2em;
}

side-relative values:

/*For x-axis*/
body
{
background-position-x: left 10%;
background-position-x: right 10px;
}

/*For y-axis*/
body
{
background-position-y: left 10%;
background-position-y: right 10px;
}

multiple values:


/*For x-axis*/
body
{
background-position-x: 25% center;
}

/*For y-axis*/
body
{
background-position-y: 25% center;
}

global values:

/*For x-axis*/
body
{
background-position-x: initial;
background-position-x: inherit;
background-position-x: unset;
}

/*For y-axis*/
body
{
background-position-y: initial;
background-position-y: inherit;
background-position-y: unset;
}

10. background-repeat

background-repeat values are:

  • repeat
  • no-repeat
  • space
  • round
  • initial

Example:

body
{
background-repeat:repeat;
}

11. background-repeat-x & background-repeat-y:

Example:

/*For x-axis*/
body
{
background-repeat-x:repeat;
}

/*For y-axis*/
body
{
background-repeat-y:repeat;
}

12. background-size:

CSS background-size property values are:

  • contain
  • cover
  • percentage
  • pixel

Example:

/*Contain*/
body
{
background-size: contain;
}

/*Cover*/
body
{
background-size: cover;
}

/*percentage*/
body
{
background-size: 35%;
}

/*pixels*/
body
{
background-size: 200px 100px;
}


You may be interested in the following topics:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial