CSS Backgrounds
Background Color
This property is used to define the background color for the specific element. To illustrate this consider the following example:
EXAMPLE
< ! DOCTYPE html >
< html >
< head >
< style >
p
{
color: blue;
font: Times New Roman;
text-align: center;
color: grey;
}
h1
{
color: grey;
font-size: 50px;
}
body
{
background-color: pink;
}
< / head >
< / style >
< body >
< h1 > Heading 1 < / h1 >
< p > The background color is set as pink < / p >
< p > Paragraph 2 < / p >
< / body >
< / html >
This will produce the following result:
Background color in < div > element
Consider the following example, in which we added different colors to different elements like < h >, <p > and < div >:
EXAMPLE
< ! DOCTYPE html >
< html >
< head >
< style >
h1 {
background-color: pink;
}
div {
background-color: purple;
}
p {
background-color: grey;
}
< / style >
< / head >
< body >
< h1 >Adding different background colors to different elements < / h1 >
< div >
The div body:
< p > Paragraph 1 having its own background color < / p >
End of div body
< / div >
< / body >
< / html >
The above example will produce the following result:
Background Image
This property is used to define the background image. The image is set on the whole page as the background. The text should be readable when adding the background that is you should opt the perfect color combination for the text and the background. To illustrate this consider the following example:
EXAMPLE
< ! DOCTYPE html >
< html >
< head >
< style >
body {
background-image: url(“http://wallpapercave.com/wp/eTgd2o2.jpg”);
}
h1 {
color: white;
text-align: center;
}
p {
color: white;
text-align: center;
}
< / style >
< / head >
< body >
< h1 > Adding Background image < / h1 >
< p > This web page has a black colored background < / p >
< / body >
< / html >
This will produce the following result:
