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.
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.
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%;
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;
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*/
