Css body background color - Inline style



<body style="background-color:#D3D3D3;">

Css body background color in Internal style sheet and External style sheet

body {
background-color:#D3D3D3;
}


JSFiddle


Body background color can also be styled as SHORTHAND CSS PROPERITIES, although this is an incomplete way.

body {
background:#D3D3D3;
}





EXAMPLE
background

  <style>
    body {
      background-color: darkgreen;
      opacity: 0.2;
    }
  </style>


result:





CSS gradient background-color

CSS "gradient" property lets you display sharp or smooth transitions between two or more colors.

EXAMPLE
background with vertical linear-gradient two colors: cyan and blue

  <style>
    body {
      background-image: linear-gradient(cyan, blue);
    }
  </style>


result:




EXAMPLE
background with vertical linear-gradient two colors: cyan and blue

  <style>
    body {
      background-image: linear-gradient(cyan, blue);
    }
  </style>


result:




EXAMPLE
background with vertical linear-gradient two colors: cyan and blue

  <style>
    body {
      background-image: linear-gradient(cyan, blue);
    }
  </style>


result:




EXAMPLE
background with horizontal linear-gradient three colors: green, yellow and red

  <style>
    body {
      background-image: linear-gradient(to right, green, yellow, red);
    }
  </style>

result:




EXAMPLE
background with horizontal linear-gradient rainbow colors, from left to right

  <style>
    body {
      background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    }
  </style>

result:




EXAMPLE
background with radial-gradient colors

  <style>
    body {
      background-image: radial-gradient(circle, blue, cyan, navy);
    }
  </style>

result:




EXAMPLE
background with radial-gradient colors

  <style>
    body {
      background-image: radial-gradient(circle, blue, cyan, navy);
    }
  </style>

result:









Privacy Policy