Deep Dive With CSS - Background And Colors

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 color. Example- color-red.
  • Using the RGB value of color. Example- #ff0000.
  • Using Hex value of 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, as the following-
  • background color

    We can set the background color, using background-color property and we can set the background of 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 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 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, background-image property is used. In CSS, by default, image is repeated, so it cover 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 Backround 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 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 backgroung-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, 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

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now