Difference between background and background-color - GeeksforGeeks

16 Jul, 2019
Background PropertyThe background property in CSS is very commonly used and contains many variants. The background property consists of all the following properties:background-colorbackground-imagebackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachmentBackground Color:Syntax:body
{
   background-color:color name
}A color name can also be given as: “green”, a HEX value as “#5570f0”, an RGB value as “rgb(25, 255, 2)”.Example:<style>    h1 {        background-color: blue;    }</style>  <body>    <h1>     Geeksforgeeks</h1></body>Output:Background Image: This property specify an image to use as the background of an element. By default, the image is repeated so it covers the entire element.Syntax:body
{
   background-image : link;
}Example:<style>    body {        background-image: url(gfgpolaroidimagefunction.png);    }</style>  <body>    <h1>Geeksforgeeks</h1></body>Output:Background-color Property:The background-color property in CSS is used to specify the background color of an element. On the other hand, if you only use “Background:” Property, you can either specify it’s valued as an image URL or as a color code or specify the value of each background property in the below-given order.Syntax:element {
    background-color property
}Example:<!DOCTYPE html> <html>     <head>         <title>background-color property</title>         <style>              body {                 text-align:center;                 background-color:green;             }             h1 {                  color:white;                 background-color:blue;             }              h2 {                 color:white;                 background-color:black;             }         </style>      </head>     <body>          <h1>Geeksforgeeks </h1>          <h2>background-color: color_name;</h2>          </body>  </html>Output:
Background PropertyThe background property in CSS is very commonly used and contains many variants. The background property consists of all the following properties:background-colorbackground-imagebackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachmentBackground Color:Syntax:body
{
   background-color:color name
}A color name can also be given as: “green”, a HEX value as “#5570f0”, an RGB value as “rgb(25, 255, 2)”.Example:<style>    h1 {        background-color: blue;    }</style>  <body>    <h1>     Geeksforgeeks</h1></body>Output:Background Image: This property specify an image to use as the background of an element. By default, the image is repeated so it covers the entire element.Syntax:body
{
   background-image : link;
}Example:<style>    body {        background-image: url(gfgpolaroidimagefunction.png);    }</style>  <body>    <h1>Geeksforgeeks</h1></body>Output:
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
Background Color:Syntax:
body
{
   background-color:color name
}
A color name can also be given as: “green”, a HEX value as “#5570f0”, an RGB value as “rgb(25, 255, 2)”.
Example:<style>    h1 {        background-color: blue;    }</style>  <body>    <h1>     Geeksforgeeks</h1></body>Output:Background Image: This property specify an image to use as the background of an element. By default, the image is repeated so it covers the entire element.Syntax:body
{
   background-image : link;
}
<style>    h1 {        background-color: blue;    }</style>  <body>    <h1>     Geeksforgeeks</h1></body>
Output:
Background Image: This property specify an image to use as the background of an element. By default, the image is repeated so it covers the entire element.
Syntax:
body
{
   background-image : link;
}
Example:<style>    body {        background-image: url(gfgpolaroidimagefunction.png);    }</style>  <body>    <h1>Geeksforgeeks</h1></body>Output:
<style>    body {        background-image: url(gfgpolaroidimagefunction.png);    }</style>  <body>    <h1>Geeksforgeeks</h1></body>
Output:
Background-color Property:The background-color property in CSS is used to specify the background color of an element. On the other hand, if you only use “Background:” Property, you can either specify it’s valued as an image URL or as a color code or specify the value of each background property in the below-given order.Syntax:element {
    background-color property
}Example:<!DOCTYPE html> <html>     <head>         <title>background-color property</title>         <style>              body {                 text-align:center;                 background-color:green;             }             h1 {                  color:white;                 background-color:blue;             }              h2 {                 color:white;                 background-color:black;             }         </style>      </head>     <body>          <h1>Geeksforgeeks </h1>          <h2>background-color: color_name;</h2>          </body>  </html>Output:
Syntax:
element {
    background-color property
}
Example:
<!DOCTYPE html> <html>     <head>         <title>background-color property</title>         <style>              body {                 text-align:center;                 background-color:green;             }             h1 {                  color:white;                 background-color:blue;             }              h2 {                 color:white;                 background-color:black;             }         </style>      </head>     <body>          <h1>Geeksforgeeks </h1>          <h2>background-color: color_name;</h2>          </body>  </html>
Output:
CSS-Misc
Picked
CSS
Difference Between
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to position a div at the bottom of its container using CSS?
Difference between BFS and DFS
Class method vs Static method in Python
Differences between TCP and UDP
Difference between var, let and const keywords in JavaScript
Difference between Process and Thread