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

This article mainly explains the "css how to set the body background picture with the content to display how much", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to set the body background picture with the content to increase the number of display" bar!

Solution:

Set a background for html (no matter the picture or solid color, it is recommended to set the background color of pure color)

Next, DIVCSS5 introduces this technique through an example. First of all, DIVCSS5 is divided into two cases. One is to tile the background image directly on body from top to bottom. We will observe that no matter whether the web page content occupies a screen or not, the background will be full from top to bottom.

First, the case of vertical tiling CSS DIV with unsolved background

1. DIV CSS case description

First, set a background image (bg.gif) for body to tile from top to bottom, and set a div box with a width of 274px and a height of 200pxmit. the background color is blue.

2. Case HTML source code:

CSS cases demonstrate DIVCSS5 DIVCSS5 instance content online

3. Case CSS code:

@ charset "utf-8"; / * DIVCSS5-CSS initialization template-www..com * / body, div {margin:0; padding:0;font-style: normal;font:12px/22px "\ 5B8B\ 4F53", Arial, Helvetica, sans-serif} / *\ 5B8B\ 4F53 represents Song style, more Chinese fonts are converted to Unicode http://www..com/jiqiao/j325.shtml * / ol, ul, li {list-style:none} body {color:#FFF Background:#E2E2E2 url (bg.gif) repeat-y center 0; text-align:center} .divbox {margin:0 auto; width:274px; height:200px; background:#00F}

4. Screenshot of an example

Set vertical tile background picture to body to display screenshot of case.

From the above picture, we can see that when the background picture is tiled vertically from top to bottom for body, no matter whether the content occupies a full screen or not, the background will be tiled all over the screen from top to bottom, so it is not so good-looking at this time. Next, the second case solves the background with multiple display of multiple tiled picture backgrounds with content.

5. Online demo: view cases

Second, solve how high the content is and how high body sets the tiled display of the background image.

1. Solution instructions

We only need to add a background color to the html in the CSS code, of course, this background setting needs to be set according to the actual situation of the layout, here because the background color is "# E2E2E2", at this time we only need to set a CSS background color to "# E2E2E2" to solve the problem of tiling the perfect background image vertically from top to bottom.

2. CSS code:

@ charset "utf-8"; / * DIVCSS5-CSS initialization template-www..com * / body, div {margin:0; padding:0;font-style: normal Font:12px/22px "\ 5B8B\ 4F53", Arial, Helvetica, sans-serif} / *\ 5B8B\ 4F53 represents Song style, more Chinese fonts are converted to Unicode http://www..com/jiqiao/j325.shtml * / ol, ul, li {list-style:none} html {background:#E2E2E2} / * CSS Note: set background color for html * / body {color:#FFF;background:#E2E2E2 url (bg.gif) repeat-y center 0 Text-align:center} .divbox {margin:0 auto; width:274px; height:200px; background:#00F}

3. Case screenshot

Thank you for your reading, the above is the "css how to set the body background picture with the content to increase the number of display" of the content, after the study of this article, I believe you on how to set the css body background picture with the content to increase the number of display how much of this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.