CSS Backgrounds:

The CSS backgrounds are used to define the background for the elements. The background effect has the following properties: Color, image, position, attachment, and repeat.

Let us explain all of these properties:


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


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:

adding-different-background-colors-to-different-elements


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:

adding-background-image