background

Lesson 1.

BACKGROUND

For study we're going to use an one cell table:<table width="1200" height="800" border="1"><tr><th >Text.</th></tr></table> .
Background is a shortcut property. Through it we can set five background-style attributes.

Background's possible values are:
 background: #FC6;
 background: url();
 background: scroll;
 background: fixed;
 background: transparent;
 background: x%;
 background: y%;
 background: left;
 background: center;
 background: right;
 background: top;
 background: bottom;
 background: repeat;
 background: repeat-x;
 background: repeat-y;
 background: no-repeat;
 background: inherit;

It's possible to apply several combination of properties:

background: red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkHAc6oJeb23_d_aKDUemMc5y3bGmZdacZkleSZuU3ziEJb03mGWbx0kVvnAScbgzE6KusVr2xkSf-sVhizoCleAGFgXYEONiQE3Zu94ahaIy3mVGk8gwLY-lJJxAhrOhWNcCYyBE4r4Xj/s1600/css.JPG) repeat-x bottom right;

BACKGROUND-ATTACHMENT

Through background-attachment property we can define how the image should or should not scroll with the document i.e. remain fixed.

The possible values are:

 background-attachment: scroll; /*the image scrolls together with the document maintenance*/
 background-attachment: fixed; /*the image does not scroll together with the document. It is fixed in one  place. */
 background-attachment: inherit;

Exercise 1!

At first we must set an image source.

For example:

background-image: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkHAc6oJeb23_d_aKDUemMc5y3bGmZdacZkleSZuU3ziEJb03mGWbx0kVvnAScbgzE6KusVr2xkSf-sVhizoCleAGFgXYEONiQE3Zu94ahaIy3mVGk8gwLY-lJJxAhrOhWNcCYyBE4r4Xj/s1600/css.JPG);

background-attachment: fixed;
Please, write on blackboard and then hit the Preview button.

background-image: ();

Lesson 2.

BACKGROUND-COLOR

Through background-color property we can set the background color for an element.
The possible values are:


 background-color: #ddffee; /* or color: RGB(78, 51, 133);*/
 background-color: transparent;
 background-color: inherit;

We can set color in several ways:

background-color: RGB(5, 50, 55);
background-color: red;
background-color: #3333CC;





Exercise 2!

Try one of this examples!
background-color: green;
background-color: RGB(125, 55, 100);

background-color: #FFDDCC;
Please, write on blackboard and then hit the Preview button.

Lesson 3.

BACKGROUND-IMAGE

Through background-image property we can set an image for background of an element.

The possible values are:

 background-image: url();
 background-image: inherit;

Exercise 3!
Please, copy any image file into your desktop then write the correct name of it into ( ), and finaly hit the Preview button.

background-image: ();

Lesson 4.

BACKGROUND-POSITION

Through background-position property we can set the position for an element.
The possible values are:

 background-position: 25px;
 background-position: 25%;
 background-position: top;
 background-position: center;
 background-position: bottom;
 background-position: left;
 background-position: right;
 background-position-x: 50%;
 background-position-x: 25px;
 background-position-x: left;
 background-position-x: center;
 background-position-x: right;
 background-position-y: 50%;
 background-position-y: 25px;
 background-position-y: top;
 background-position-y: center;
 background-position-y: bottom;

At first we must set an image source.

Try this examples!

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkHAc6oJeb23_d_aKDUemMc5y3bGmZdacZkleSZuU3ziEJb03mGWbx0kVvnAScbgzE6KusVr2xkSf-sVhizoCleAGFgXYEONiQE3Zu94ahaIy3mVGk8gwLY-lJJxAhrOhWNcCYyBE4r4Xj/s1600/css.JPG);

background-position-y: top;

Exercise 4!
Please, write an image name or use that one which is on blackboard,

then try one possible variant from this list:

background-position: left top; /* or 0% 0% */

background-position: left center; /* or 0% 50% */

background-position: left bottom; /* or 0% 100% */

background-position: right top; /* or 100% 0% */

background-position: right center; /* or 100% 50% */

background-position: right bottom; /* or 100% 100% */

background-position: center top; /* or 50% 0% */

background-position: center center; /* or 50% 50% */

background-position: center bottom; /* or 50% 100% */

background-position: 50%0%;

background-image: ();

Lesson 5.

BACKGROUND-REPEAT

Through background-repeat property we can set the repeating variant of the background image.
The possible values are:

 background-repeat: repeat; /*multiple copies the background image in all directions*/
 background-repeat: repeat-x; /*multiple copies the background image horizontally*/
 background-repeat: repeat-y; /*multiple copies the background image vertically*/
 background-repeat: no-repeat; /*not repeating the image*/
 background-repeat: inherit;

At first we must set an image source.

Exercise 5!
Please, input source code for image, then try one of the possible values.
for example:

background-image: url()
background-repeat: repeat-x;

background-image: url();

OPACITY (CSS3)

This property defines level of the transparency of an element.

The
possible values are:
 opacity: 0.1; /* or .1*/
 opacity: 0.2; /* or .2*/
..................
opacity: 1.0;
For IE we can apply filter: alpha(opacity=10) /* 0-100*/

BACKGROUND-SIZE (CSS3)

This property defines the size of the image of the background.

The possible values are:

 background-size: 100px 200px; /*width and height*/
 background-size: 75%;
 background-size: auto;
 background-size: contain;
 background-size: cover;

BACKGROUND-SPACING (CSS3)

This property defines the spacing between the background images.

The possible values are:
background-spacing: 25px 28px;
background-spacing: 15px;
background-spacing: inherit;

BACKGROUND-QUANTITY (CSS3)

This property defines how many times the background image will repeat.

The possible values are:

 background-quantity: infinite;
 background-quantity: inherit;
 background-quantity: 4; /* four times*/

background-image: url();