CSS background-css background (music relaxation chair)
CSS Background Directory
CSS background syntax
CSS background color
CSS background image
Center background
Compound background style shorthand
Background Background Summary
First, CSS background background grammar-TOP (music relaxation chair)
CSS Background Basics
CSS background This refers to setting the background properties of the object through CSS, such as setting the background of various styles through CSS.
Background grammar: (Music relaxation chair)
Background:background-color | | Background-image | | Background-repeat | | background-attachment | | Background-position
CSS in the background word:
Background CSS Manual Query-background manual
Background-color set color As Object background color
Background-image setting a picture as a background image
Background-repeat Setting the background tile repeat direction
Background-attachment Sets or retrieves whether the background image is scrolled or fixed with the content of the object.
Background-position Sets or retrieves the background image position of the object.
The value of the background background style is a combination of composite attribute values, that is, the value of the background word can be linked to multiple attribute values, with a space interval between values and values.
Such as:
Background: #000 URL (picture address) No-repeat left top
Css Background Background effect:
1. Set solid color background. Background background can set the background color of the object's solid color,
2, set the picture as the background. You can set the object background as a picture, if the background is a picture, you can let the picture repeat the tiling, or the picture as the object background fixed to the object anywhere.
Analytic diagram of background analysis
Background background grammatical structure analysis diagram
CSS Background composite background structure analysis diagram
Body{background: #FFF url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0 Fixed}
Set Page background style
HTML original background and CSS background control
HTML refers to the table background setting of the corresponding effect
HTML background Word:
bgcolor setting the background color corresponds to the CSS background color background-color
Background set the picture as background with CSS background picture corresponding background-image
Most original HTML background settings demo code: (Music relaxation chair)
<table bgcolor= "#996600" >
<tr>
<TD background= "Http://www.divcss5.com/img/css-logo.gif"
Width= "height=" > </td>
</tr>
</table>
Here set the table background color to #996600, then set the TD background image to Http://www.divcss5.com/img/css-logo.gif
Second, background color-TOP
Background-color: #FFF
Div{background-color: #FFF}
Set object background to pure white
If you set the background color for table, you can use the bgcolor= color value to set the object background color.
If it is a CSS background color, you can use Background-color: color value, or background: color value to set the object background color.
CSS Background color Settings div+css Demo diagram:
HTML background, CSS background instance Demo
Use Background-color and background to set the object background color, respectively
Third, CSS picture background-TOP
Here is the picture as a background image-CSS background image details: http://www.divcss5.com/jiqiao/j80.shtml
CSS can use background or background-image to directly reference the picture address to set the picture as the object background.
Background:url (http://www.divcss5.com/img/logo.gif); Set DIVCSS5 logo image as background
Or
Background-image:url (Http://www.divcss5.com/img/logo.gif), with the same effect. So set the picture as a background there is a flaw is the picture will be up and down around the repetition, next we just look at the example tutorial can master CSS background
CSS Background anatomy diagram
Picture background style (fixed, scrolling)
To achieve this effect using a CSS word is background-attachment of course usually the background is fixed by default if you use CSS background shorthand.
Background-attachment Use resolution:
background-attachment:fixed; fixed background
Background-attachment:scroll CSS background picture is scrolling with object content
Picture background background syntax:
Background-image:url (URL)
Background-image:url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif) Set object background as Picture http://www.divcss5.com/ Img201301/divcss5-logo-2013.gif
If the picture is asked to repeat the tile as the background, the tiling direction and so on we all need background-position and background-repeat use together
Div{background-image:url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif);
background-repeat:no-repeat;background-position:5px 6px}
The object div is defined here, the background image is http://www.divcss5.com/img201301/divcss5-logo-2013.gif, and the background image is not duplicated, positioning the Div object on the left distance of 5px, up to the distance of 6px
Four, DIV CSS Background Center-TOP
CSS background is divided into left and right center and center, the concrete left and right center method see.
The background image is centered, can be used to calculate the upper and lower height and then split the settings, such as the height of the upper and lower distance of 500px, then set the top of the image of how many px can let the picture to the center.
V. Compound background style shorthand-TOP
We need to take into account the code of simplicity, where we can optimize the shorthand code
1, if only set background for a single color
Background-color: #FFF Our shorthand for background: #FFF
2, the picture is set as the background shorthand
Background-image:url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif);
background-repeat:no-repeat;background-position:5px 6px
We shorthand for:
Background:url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 5px 6px
Vi. CSS Background (background) summary-TOP
Use the picture as a background in a page layout is often encountered, I hope you can master its knowledge in practice. General Set object picture as Background property instance background: #666 URL (picture address) No-repeat Center top; (explanation first set the background color immediately after setting the picture as the background immediately after the picture is repeated and then with the picture in the object position.) The background color of the front can not be set at the same time is not necessary, general use of the picture as the object background if you want to set the picture to repeat the distance location will set the picture position)
1, set the picture as the background if the picture is set to repeat in the x-coordinate direction, if the picture is set to the left or right position of the object, it will not work, and can be set to start at or below the object.
2, set the picture as the background if the picture is set to repeat in the y-coordinate direction, the picture will not work if it is set to the top or bottom position of the object, and the picture can be set to start at the left or right position of the object.
3, if the setting background is completely repeated display, then set the picture in the upper and lower position of the object to display the wireless.
Web page layout When we often set the background color, background settings picture, to achieve the aesthetic effect we need, we practice to write CSS background background as simple as possible, the introduction of the picture when the path is correct, if you want to locate the object background.
Classic Background Composite Property expressions:
. Divcss5{background: #FFF url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 5px 6px}
Here both sets the background color, the background picture introduction, the background picture localization, the picture as the background whether repeats the style.
I hope you understand that there is no understanding of the place can enter the CSS classroom Discussion area issue, we will do our best to answer you.
CSS background (CSS background)