Post
Ask Question

Deep Dive With CSS - Background And Colors

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>  
  3.   
  4. <head>  
  5.     <style>  
  6.         h1 {  
  7.             color: blue;  
  8.         }  
  9.           
  10.         p {  
  11.             color: red;  
  12.         }  
  13.     </style>  
  14. </head>  
  15.   
  16. <body>  
  17.     <h1>c# corner</h1>  
  18.     <p>c-sharpcorner.com</p>  
  19. </body>  
  20.   
  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>  
    3.   
    4. <head>  
    5.     <style>  
    6.         body {  
    7.             background-color: orange;  
    8.         }  
    9.           
    10.         h1 {  
    11.             color: white;  
    12.         }  
    13.     </style>  
    14. </head>  
    15.   
    16. <body>  
    17.     <h1>c# corner</h1>  
    18.     <p>c-sharpcorner.com</p>  
    19. </body>  
    20.   
    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>  
    3.   
    4. <head>  
    5.     <style>  
    6.         body {  
    7.             background-color: #ffa500;  
    8.         }  
    9.           
    10.         h1 {  
    11.             color: white;  
    12.         }  
    13.     </style>  
    14. </head>  
    15.   
    16. <body>  
    17.     <h1>c# corner</h1>  
    18.     <p>c-sharpcorner.com</p>  
    19. </body>  
    20.   
    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>  
    3.   
    4. <head>  
    5.     <style>  
    6.         body {  
    7.             background-color: #FFA500;  
    8.         }  
    9.           
    10.         h1 {  
    11.             color: white;  
    12.         }  
    13.     </style>  
    14. </head>  
    15.   
    16. <body>  
    17.     <h1>c# corner</h1>  
    18.     <p>c-sharpcorner.com</p>  
    19. </body>  
    20.   
    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>  
    3.   
    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>  
    11.   
    12. <body>  
    13.     <h1>c# corner</h1>  
    14.     <p>c-sharpcorner.com</p>  
    15. </body>  
    16.   
    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>  
  3.   
  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>  
  11.   
  12. <body>  
  13.     <h1>c# corner</h1>  
  14.     <p>c-sharpcorner.com</p>  
  15. </body>  
  16.   
  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>  
  3.   
  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>  
  12.   
  13. <body>  
  14.     <h1>c# corner</h1>  
  15.     <p>c-sharpcorner.com</p>  
  16. </body>  
  17.   
  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>  
  3.   
  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>  
  12.   
  13. <body>  
  14.     <h1>c# corner</h1>  
  15.     <p>c-sharpcorner.com</p>  
  16. </body>  
  17.   
  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>  
  3.   
  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>  
  12.   
  13. <body>  
  14.     <h1>c# corner</h1>  
  15.     <p>c-sharpcorner.com</p>  
  16. </body>  
  17.   
  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>  
  3.   
  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>  
  12.   
  13. <body>  
  14.     <h1>c# corner</h1>  
  15.     <p>c-sharpcorner.com</p>  
  16. </body>  
  17.   
  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>  
  3.   
  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>  
  13.   
  14. <body>  
  15.     <h1>c# corner</h1>  
  16.     <p>c-sharpcorner.com</p>  
  17. </body>  
  18.   
  19. </html>  
Output
 
 

Conclusion

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


Similar Articles