CSS background-image

 CSS background-image is used to set the background image. It is one of the attributes of CSS background . In addition to defining the background image of the entire web page, it can also be used to set the background image of a single web page element, such as DIV block, span area or HTML table . , Background -image is a standard CSS web page element background pattern design method. It can usually be mixed and matched with background-position , background-repeat or background-color . Almost all mainstream browsers support the background-image property.

CSS background-image basic syntax

background-image: url('Image URL' );

In the example, there are three parameters that can be used in the url parentheses, namely none (default value, no picture is displayed), inherit (inherited from the parent layer), and picture URL. The first parameter is none unless in special circumstances This is necessary, otherwise the meaning of writing is not great. Inherit is not supported by some versions of IE, so the most meaningful way to write is to give the URL of the picture to be displayed. The following two examples set the entire webpage separately The background image of and the background image of the DIV block.

CSS background-image example 1. Web page background image

body {
　background-image:url('Image URL to be displayed' );
　background-repeat:no-repeat;
　background-color: background color;
}

Setting the background-image directly in the body is a common method used by many designers. The advantage is that it is more convenient to manage the background of the entire webpage. Adding the effect of "background-repeat:no-repeat" means that the background image should not be displayed repeatedly, and finally add Background -color is used to make a basic background color. If the picture is not displayed normally, at least the background color can be displayed. This is also an insurance technique when designing web page backgrounds. The background color can be selected by the " color code table ".

CSS background-image example two, DIV block background image

<style type="text/css">
#T1{
　background-image:url('background image');
　width:400px;
　height:60px;
　border:1px #ccc solid;
}
#T2{
　background-image:url( 'Background image');
　background-repeat:no-repeat;
　width:400px;
　height:60px;
　border:1px #ccc solid;
　margin-top:10px;
}
</style>
<div id="T1"></ div>
<div id="T2"></div>

The above example presents the result as

Examples of this are two different DIV blocks design background image, for clarity of presentation of the scope of example, it is for the DIV block plus a gray border ( border ), by the first DIV can see the block background- image The default background image effect will automatically fill the entire area. The second DIV block uses background-repeat to limit the image display state. The no-repeat example is to display the image only once. Repeatedly appear vertically or horizontally, please refer to: background-repeat .