• Problems

  This line enable URL Rewriting . It must be enabled via the RewriteEngine directive! and if your .htaccess file is going to use rewrite rules, you should always include this line. Otherwise, you can’t be sure if its enabled or not. The string “on” is case insensitive.

The CSS background properties are used to define the background effects for elements.The background property in CSS allows you to control the background of any element (what paints underneath the content in that element).

CSS background properties:

      
background->Sets all the background properties in one declaration
background-attachment->Sets whether a background image is fixed or scrolls with the rest of the page
background-color->Sets the background color of an element 
background-image->Sets the background image for an element 
background-position->Sets the starting position of a background image
background-repeat->Sets how a background image will be repeated
background-size->Set the size of background image
background-origin-> The background-origin property defines where to paint the background
background-clip->It has similar effect as background-origin. 

---

Background Color

The background-color property specifies the background color of an element.

The background color of a page is set like this:
Example
body {
    background-color: lightblue;
} 

---

Background Image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:
Example
body {
    background-image: url("paper.gif");
}

---

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:
Example
body {
    background-image: url("gradient_bg.png");
} 


If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:
Example
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

Note     Note: To repeat an image vertically set background-repeat: repeat-y;

---

Background Image - Set position and no-repeat

Showing the backgound image only once is also specified by the background-repeat property:
Example
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.

The position of the image is specified by the background-position property:
Example
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

---

Background Image - Fixed position
To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:

Example

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
} 

---

Background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

The shorthand property for background is background:
Example
body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

---

Background-size

body {
     background: url(image.jpg);
  background-size: 300px 100px;
}

There are four different syntaxes you can use with this property: the keyword syntax, the one-value syntax, the two-value syntax, and the multiple background syntax.
Keywords

There are two keywords you can use with background-size: cover and contain .The difference cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges. contain, on the other hand, says to always show the whole image, even if that leaves a little space to the sides or bottom.

The default keyword — auto — tells the browser to automatically calculate the size based on the actual size of the image and the aspect ratio.

One Value

If you only provide one value (e.g. background-size: 400px) it counts for the width, and the height is set to auto. You can use any CSS size units you like, including pixels, percentages, ems, viewport units, etc.

Two Values

If you provide two values, the first sets the background image's width and the second sets the height. Like the single value syntax, you can use whatever measurement units you like.

Multiple Images

You can also combine any of the above methods and apply them to multiple images, simply by adding commas between each syntax. Example:

html {
     background: url(image.jpg), url(image2.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

Keep background image stacking order in mind when using multiple images.

---

Background-origin

The background-origin property defines where to paint the background: across the whole element, inside the border, or inside the padding.
There are four values: border-box, padding-box, content-box and inherit
Example
body {
   background: #ffffff url("img_tree.png") no-repeat right top;
 background-origin: border-box;
  
}