HTML How to set the page background map

Today and everyone for the HTML How to set the page background map, we use the layout of the entire page thinking, there are ways to set up, each method is different. and tips for setting up a background map

Web Monochrome background

If the plain color of the page background, only need to set the body background background color can be

Body{background: #FFF}

Set page background to White

Body{background: #FFF url (bg.gif) repeat-x 0}

This set this image to the background image by the top of the page horizontally tiled, the background is white, note here according to your picture path set to introduce the picture path.

2. Horizontal Tile class background image

For example, the 2014 version of the Web page, the same principle and gradient tiling, but also cut out a vertical bar as the body background horizontal tile implementation, so that the full screen page background covered.

The code is the same as the 1th, except that the picture is different. Sets the background picture horizontally on the body.

Irregular large picture background

Often see some thematic or image pages, the background is a very large picture as the background, and usually widescreen and narrow screen display can display full screen background image, as the image can be adapted to the same width size. In fact, this implementation is very simple, the image width of the art design is large enough, such as the widest screen resolution width of 2560 pixels on the market, so to allow such a widescreen display to browse this page can also be covered full screen, then your background image must be made of width greater than or equal to 2560px width, So since the widescreen, narrow screen display open this page can be full screen, minimize, maximize, change the browser window open background picture is full-screen center looks like the background image adaptive size.

Key: Full-screen adaptive background image is the key is the picture to do wide enough to the widest resolution display can be covered, small resolution is naturally more paved. Also need to set such background picture as body background after need to center.

If this background image is: bg.jpg

Set CSS code:

Body{background:url (bg.jpg) no-repeat Center 0}

Code Explanation: Set this image as a Web page background, usually uneven (no-repeat), horizontally centered, on the display

The head background picture and the bottom background picture content how much height can increase or decrease the head bottom background unchanged

Here we introduce two common head and bottom different background picture techniques to set the layout method.

This directly sets the head background image to be centered on the body background, the bottom copyright place div is set to width 100%, and the background picture or background color is set.

Body{background:url (bg.jpg) no-repeat Center 0} #footer {margin:0 auto;width:100%;background:url (ft-bg.jpg) no-repeat Center 0}

This allows you to have a different head bottom background and not be affected by how much content.

The bottom background picture is far beyond the height of the copyright bottom box.

Such a structure up and down different pictures, not with the middle content of the lower impact on the background layout, usually the HTML tags and body settings background can be implemented.

If the top deep blue background image is "top.jpg", the bottom light blue background image is "foot.jpg"

DIV CSS Settings page background key CSS code:

Html{background:url (top.jpg) no-repeat Center 0} body{background:url (foot.jpg) no-repeat Center Bottom}

Explanation: Set the dark blue background image horizontally centered on the HTML background, and set a light blue background image to center the body background image horizontally.

The above is a summary of several common Web page background layout settings, flexible settings Regardless of body, HTML, div can set the background to achieve their own background effect, if the div set to this page background, then this div height can not be set (default automatic), div width set 100%.

Set the page background is these, more exciting please pay attention to the PHP Chinese network other related articles!

Related reading:

How to set the font color in HTML

How to enter a space character in HTML

Why CSS styles are set for div?