HTML 5

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

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs