CSS Background



Using the CSS background attribute, you can make the color or image as the background of the HTML page.


Background Color

The "background-color" property is used to set the background color.

body { background-color: gray; }

This example render the entire page (the <body> tag) a gray background.

The property is not inheritable, the default is transparent, if the sub-element does not set the background color, then display the background color of the parent element.

In fact, all the background attributes can not be inherited


Background image

The "background-image" property is used to set the background image, value = url of the image.

body { background-image: url (../ images / bg.gif); }

This example specifies the background image for the body tag. The value of this attribute is the URL address of the image. It can be an absolute address or a relative address. Note that the relative address is relative to the CSS file.


Background repeat

The "background-repeat" attribute is used to set the repeat attribute of the background image. The possible values ​​are as follows:

Value Description
repeat By default, the background image is tiled in portrait and landscape orientation
no-repeat The background image is not tiled
repeat-x The background image is only horizontally tiled
repeat-y The background image is only tiled in portrait orientation
body {
	background-image: url (../images/bg.gif);
	background-repeat: no-repeat;
}}

By default, the background image will start at the top-left corner of the applied background image element, and to change the start mode, apply the background positioning properties.


Background position

The "background-position" property is used to set the background position. The are 2 syntax:

1) background-position : length || length

Percentage, or a numeric consisting of a floating-point number and a unit identifier

background-position: 10px 2 0px; 
2) background-position : position || position

left/center/right || top/center/bottom

background-position: right center; 

Note

To set the background image position, you must first set the background-image property.

If only one value is specified, the value will be used for the X (horizontal), and the Y (vertical) will default to 50% or center. If two values ​​are specified, the second value is used for the Y (vertical).


Background attachment

The "background-attachment" property is used to set the background attachment, whether the background image is scrolled or fixed with the content of the object.
The possible values ​​are as follows:

Value Description
scroll By default, the background image is scrolled with the content of the object
fixed The background image is fixed
body { 
   background-image: url (../ images / bg.gif); 
   background-repeat: no-repeat;
   background-attachment: fixed;
}

Composite attribute

The background attribute is a composite attribute, so the above attributess can be written as:

background: value 1 value 2 value 3 ...

body { background: url(../images/bg.gif) no-repeat top right; }

Each value is separated by a space.



Copyright 2014-2017 by DeveloperTut.com. All Rights Reserved.
TwitterGoogle+Facebook