Deep Dive With CSS - Background And Colors

Ajay Malik
Aug 31, 2016
7.1k
0
1
Article

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>c-sharpcorner.com</p>
</body>
</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>
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 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 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, 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
<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
        }
    </style>
</head>

<body>
    <h1>c# corner</h1>
    <p>c-sharpcorner.com</p>
</body>

</html>
Output

Set Backround image of heading element

We can use the heading selector to set the background image of <h1>.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>c-sharpcorner.com</p>
</body>
</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

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
backgound-repeat;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>c-sharpcorner.com</p>
</body>
</html>

Output

background repeat in x direction

Repeat image in x (horizontal), using background-repeat:repeat-x property

Syntax

selected_element

{

background-repeat: repeat-x;

}

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>c-sharpcorner.com</p>
</body>
</html>

Output

background repeat in y direction

Repeat image in x (vertically), using background-repeat:repeat-y property.

Syntax

selected_element

{

background-repeat: repeat-y;

}

Example
<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
            background-repeat: repeat-y;
        }
    </style>
</head>

<body>
    <h1>c# corner</h1>
    <p>c-sharpcorner.com</p>
</body>

</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-repeat: no-repeat;

}

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>c-sharpcorner.com</p>
</body>
</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

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png");
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>c-sharpcorner.com</p>
</body>
</html>