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

This article mainly introduces css how to set div background picture related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this css how to set div background picture article will have a harvest, let's take a look at it.

Background basic grammar

1. CSS words: use background-style words for setting the background of any object.

2. CSS background attribute syntax structure

1), set only the color:

Div {background:#000}

Set the background to pure black (# 000) for div, so you don't need to use background-color to set the background color, so you can simplify and save a few character codes.

2) set the picture as the background:

Div {background:url (picture path) no-repeat 4px 5px}

Set the background picture to the div, which is used as the background untiled (no-repeat). At the same time, when the picture is used as the background, the left spacing 4px from the div starts to be displayed, and the distance 5px starts to be displayed.

Second, DIV background picture setting case set

Set several different DIV boxes, respectively, the picture as the DIV background, set CSS repeated tile background picture, CSS does not repeat tile background picture, CSS horizontal (from left to right) tile background picture, CSS vertical (from top to bottom) tile background picture, through the DIV setting background picture in different states to master div css background style.

Here DIVCSS5 sets four DIV boxes, CSS frame, CSS height and CSS width are the same, while setting the above four different background image styles. Set the LOGO image of DIVCSS5 as the background for the case.

1. Complete case HTML code

Background picture online demo DIVCSS5

Tile the entire DIV background

Completely tiled all over DIV

DIV background picture does not repeat tiling

The background picture is not tiled repeatedly.

Tile the DIV background horizontally (from left to right)

Tile the picture horizontally as a DIV background

Tile the DIV background vertically (from top to bottom)

Tile the picture vertically and horizontally as the DIV background

Description: set up four DIV boxes named ".box1", ".box2", ".box3" and ".box4" respectively. This case is completed on the basis of DIVCSS5 initialization template.

2. Complete case CSS code

Charset "utf-8"; / * DIVCSS5-CSS initialization template-www..com * / body, div {margin:0; padding:0;font-style: normal;font:16px/22px "\ 5B8B\ 4F53", Arial, Helvetica, sans-serif} ol, ul, li {list-style:none} img {border: 0; vertical-align:middle} body {color:#000000;background:#FFF; text-align:center} a {color:#000000;text-decoration:none} a:hover {color:#BA2636 Text-decoration:underline} .box1, .box2, .box3, .box4 {width:400px; height:200px; margin:0 auto; border:1px solid # 666} .box1 {background:url (- logo.gif)} .box2 {background:url (- logo.gif) no-repeat 10px center} .box3 {background:url (- logo.gif) repeat-x 0 30px} .box4 {background:url (- logo.gif) repeat-y center}

The above first part of CSS is the initialization template with its own CSS style, and the latter ".box1", ".box2", ".box3" and ".box4" respectively set DIV horizontal center (CSS layout center), width is 400px, height is 200px, and set a black border.

3. Key explanation of DIV+CSS case.

1), .box1 {background:url (- logo.gif)}

Set the picture as the background of ".box1", only use the background lead picture as the background, and no other value is set, which represents that the whole object background is tiled in any direction after this picture is used as the background.

Screenshot of the effect in the corresponding case browser:

The background image is completely tiled with DIV screenshots.

2), .box2 {background:url (- logo.gif) no-repeat 10px center}

Set the picture as the background of ".box2", no-repeat does not tile and repeat display, and set this picture as the background 10px to the left of the object, vertically centered (upper and lower center) to display the picture.

Screenshot of the effect in the corresponding case browser:

The picture is not repeated as a screenshot of the DIV background picture

3), .box3 {background:url (- logo.gif) repeat-x 0 30px}

Set the picture as the background of ".box3". Repeat-x tiles the picture horizontally, and the distance from the left side of the object is 0px spacing, and the distance from the distance 30px on the object begins to tile horizontally.

Screenshot of the effect in the corresponding case browser:

Picture as DIV background picture horizontal tile screenshot

4), .box4 {background:url (- logo.gif) repeat-y center}

Set the picture as the background for ".box4". Repeat-y tiles the picture vertically from top to bottom, and the picture is horizontally centered and tiled vertically from top to bottom.

Screenshot of the effect in the corresponding case browser:

Case screenshot of vertically tiling DIV background picture

This is the end of the article on "how to set up div background pictures in css". Thank you for reading! I believe you all have a certain understanding of "how to set up div background pictures in css". If you want to learn more, you are welcome to follow the industry information channel.

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.