Introduction

You can follow my previous article to learn, what is CSS and why we use CSS: click here.
In CSS, colors are generally used as-
  • Using the name of the color. Example- color-red.
  • Using the RGB value of color. Example- #ff0000.
  • Using the Hex value of the color. Example- #fffff.
Color
To set the color of an HTML element, the 'color' property is used. We can use the name, RGB and HEX value to change the color of HTML element.
Syntax:
selected_element
{
color: color_name;
}
Example
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <style>
  6. h1 {
  7. color: blue;
  8. }
  10. p {
  11. color: red;
  12. }
  13. </style>
  14. </head>
  16. <body>
  17. <h1>c# corner</h1>
  18. <p>c-sharpcorner.com</p>
  19. </body>
  21. </html>
Output
Background
In CSS, we can set the background, like the following-
  • background-color
     We can set the background color, using background-color property and we can set the background of the body or an individual element.
    Syntax
    selected_element
    {
    background-color:color_name;
    }
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. body {
    7. background-color: orange;
    8. }
    10. h1 {
    11. color: white;
    12. }
    13. </style>
    14. </head>
    16. <body>
    17. <h1>c# corner</h1>
    18. <p>c-sharpcorner.com</p>
    19. </body>
    21. </html>
    Output
    For the background color, using RGB, we used Orange color and the RGB value of Orange color is #ffa500.
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. body {
    7. background-color: #ffa500;
    8. }
    10. h1 {
    11. color: white;
    12. }
    13. </style>
    14. </head>
    16. <body>
    17. <h1>c# corner</h1>
    18. <p>c-sharpcorner.com</p>
    19. </body>
    21. </html>
    Output
    For the background color, using HEX value, we used Orange color and the Hel value of Orange color is #FFA500.
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. body {
    7. background-color: #FFA500;
    8. }
    10. h1 {
    11. color: white;
    12. }
    13. </style>
    14. </head>
    16. <body>
    17. <h1>c# corner</h1>
    18. <p>c-sharpcorner.com</p>
    19. </body>
    21. </html>
    Output
  • background-image
     To set an image in the background, the background-image property is used. In CSS, by default, the image is repeated, so it covers the whole page.
    Syntax
    selected_element
    {
    background-image:url("url_image");
    }
    Example
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <style>
    6. body {
    7. background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
    8. }
    9. </style>
    10. </head>
    12. <body>
    13. <h1>c# corner</h1>
    14. <p>c-sharpcorner.com</p>
    15. </body>
    17. </html>
    Output
Set Background image of heading element
We can use the heading selector to set the background image of <h1>.
Example
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <style>
  6. h1 {
  7. background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
  8. }
  9. </style>
  10. </head>
  12. <body>
  13. <h1>c# corner</h1>
  14. <p>c-sharpcorner.com</p>
  15. </body>
  17. </html>
Output
Background repeat
To repeat the background of a body or an individual element, background-repeat is used.
Syntax
selected_element
{
background-image:url("url_image");
background-repeat;
}
Example
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <style>
  6. body {
  7. background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
  8. backgound-repeat;
  9. }
  10. </style>
  11. </head>
  13. <body>
  14. <h1>c# corner</h1>
  15. <p>c-sharpcorner.com</p>
  16. </body>
  18. </html>
Output
background-repeat in x-direction
Repeat image in x (horizontal), using background-repeat:repeat-x property
Syntax
selected_element
{
background-image: url("image_url");
background-repeat: repeat-x;
}
Example
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <style>
  6. body {
  7. background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
  8. background-repeat: repeat-x;
  9. }
  10. </style>
  11. </head>
  13. <body>
  14. <h1>c# corner</h1>
  15. <p>c-sharpcorner.com</p>
  16. </body>
  18. </html>
Output
background-repeat in y-direction
Repeat image in x (vertically), using background-repeat:repeat-y property.
Syntax
selected_element
{
background-image: url("image_url");
background-repeat: repeat-y;
}
Example
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <style>
  6. body {
  7. background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
  8. background-repeat: repeat-y;
  9. }
  10. </style>
  11. </head>
  13. <body>
  14. <h1>c# corner</h1>
  15. <p>c-sharpcorner.com</p>
  16. </body>
  18. </html>
Output
Background image- no-repeat
In CSS background-repeat:no-repeat is used to off the repeat of an image.
Syntax
selected_element
{
background-image: url("image_url");
background-repeat: no-repeat;
}
Example
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <style>
  6. body {
  7. background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
  8. background-repeat: no-repeat;
  9. }
  10. </style>
  11. </head>
  13. <body>
  14. <h1>c# corner</h1>
  15. <p>c-sharpcorner.com</p>
  16. </body>
  18. </html>
Output
background-position property
In CSS, the background-position property is used to set the position of an image.
Syntax
selected_element
{
background-image: url("image_url");
background-repeat: no-repeat;
background-position: right top;
}
Example
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <style>
  6. body {
  7. background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
  8. background-repeat: no-repeat;
  9. background-position: right top;
  10. }
  11. </style>
  12. </head>
  14. <body>
  15. <h1>c# corner</h1>
  16. <p>c-sharpcorner.com</p>
  17. </body>
  19. </html>
Output

Conclusion

In this article, we studied CSS - Background, And Colors.