Shulou(Shulou.com)06/01 Report--

This article mainly introduces the "CSS how to set background picture horizontal tile" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope this "CSS how to set background picture horizontal tile" article can help you solve the problem.

1. CSS background background picture

1. Background picture syntax

Background-image:url () introduces the background image

Background-repeat:no-repeat sets whether the background image is tiled repeatedly.

Background-position:left top sets the css background positioning of the picture. Left stands for the left and top stands for the top.

Abbreviated background picture syntax:

Background:url (picture address) no-repeat left top

2. Background image settings

Body {background:url (http://www..com/img201301/-logo-2013.gif) no-repeat 0 0})

The picture "http://www..com/img201301/-logo-2013.gif"" is set here as the background of the page is not repeated and is displayed on the top and left.

3. CSS background image is centered.

Center horizontally:

Background:url (picture address) no-repeat center top

Center vertically:

Background:url (picture address) no-repeat left 50%

Here 50% is randomly set to 50% distance, and the details are vertically centered up and down, and then you need to set the percentage balance.

4. General cases of background pictures

Body sets the background css code for a web page

Body {background:url (http://www..com/img201301/-logo-2013.gif) no-repeat 0 0})

Screenshot of CSS picture background case

5. Div css background image is centered.

Css background image center code:

Body {background:url (http://www..com/img201301/-logo-2013.gif) no-repeat center 0})

Here we use the "center" center attribute. For more details, please go to css background to learn more.

Center screenshot

6. the background picture is tiled horizontally

CSS background X horizontal tiling code:

Body {background:url (http://www..com/img201301/-logo-2013.gif) repeat-x})

Screenshot of the case:

7. The background picture is tiled vertically.

CSS background Y vertical tile code:

Body {

Background:url (http://www..com/img201301/-logo-2013.gif) repeat-y

}

Screenshot of the background effect of tiled and repeated images:

Vertical tile picture background screenshot in the longitudinal Y-axis direction

8. The background image of the whole page is tiled repeatedly.

Image background full-screen web page repeat tile key code:

Body {background:url (http://www..com/img201301/-logo-2013.gif)}

Screenshot:

Description: there is no setting whether to repeat, whether to stay on the left and on the right, just set the background to introduce the picture, you can easily realize the natural full-screen tiling of the picture.

Second, CSS background color

1. Background background color syntax

Background:#FFF

. {background:#FFF}

Set the background of the object to white

2. Background color case

If we set the background of the web page to be all white and the text color to be white

1), corresponding background color CSS code and HTML source code:

Untitled document body {background:#000; color:#FFF} DIVCSS5 background is black; text color is white

2), background color and text color case screenshot

This is the end of the content about "how to set the horizontal tiling of background pictures in CSS". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.