In the CSS layout, you may sometimes encounter the body directly set the picture as a vertical page background horizontally tiled (tile from top to bottom), when the entire page regardless of whether the content of a full screen, the CSS background will be from the top to the lower berth (portrait) Full screen. But sometimes we do not need such an effect, need to occupy how high content, body background on the vertical from top to bottom full height. It's obviously not going to get the effect we want.
Workaround: Set the background color for HTML (regardless of the picture or solid color, it is recommended to set a solid color background)
Next DIVCSS5 through an example for you to introduce this technique, first DIVCSS5 is divided into two cases, one is directly to the body set background picture from top to bottom tile, we will observe whether the content of the Web page is filled with a screen, the background will be from top to bottom full shop.
First, unresolved background vertical tile CSS div case-top
1, Div CSS case Description first set a background picture (bg.gif) from top to bottom tile, set a div box width of 274px, height is 200px;div background color blue.
2, the case of HTML source code:
<! DOCTYPE html>
<metahttp-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>
CSS Case
Online Demo divcss5</title>
<linkhref= "Images/style.css" rel= "stylesheet" type= "Text/css"/>
<!--www.divcss5.com-->
<body>
<divclass= "Divbox" >divcss5 instance content </div>
</body>
3, Case CSS code:
@charset "Utf-8";
/* DIVCSS5-CSS Initialization Template-www.divcss5.com * *
Body, div {margin:0; padding:0;font-style:normal;font:12px/22px "5b8b4f53", Arial, Helvetica, Sans-serif}
/* 5b8b4f53 represents the song body, more Chinese font to Unicode http://www.divcss5.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. Example screenshot
Vertical tile background Picture Display Case screenshot for body
From the picture above, you can see that the background picture on the body is tiled vertically from top to bottom, regardless of whether the content is full of 1 screens, its background will be tiled from top to bottom full screen, this time is not so good-looking, then the second case on this basis to solve the background with the content of multiple display multiple tiled picture background.
5, Online Demo: View the case
Second, to resolve the content of how high body settings background picture Tile show how high-top
1, solve the explanation we only need in the CSS code to add a background color to the HTML, of course, this background settings need to set according to the actual layout, here because the background color is "#E2E2E2", at this time we just need to set a CSS background color for the HTML "#E2E2E2" can be resolved to achieve the perfect background picture vertically from top to bottom tile problem.
2, CSS code:
@charset "Utf-8";
/* DIVCSS5-CSS Initialization Template-www.divcss5.com * *
Body, div {margin:0; padding:0;font-style:normal;font:12px/22px "5b8b4f53", Arial, Helvetica, Sans-serif}
/* 5b8b4f53 represents the song body, more Chinese font to Unicode http://www.divcss5.com/jiqiao/j325.shtml * *
OL, UL, Li{list-style:none}
Html{background: #E2E2E2}/*
CSS Annotations
Description: Set the 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
Resolution of the body background picture vertical tile content of how high background picture display how high
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
