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

Xiaobian to share with you how to set CSS html page background image, I believe most people still do not know how, so share this article for everyone's reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

1. Monochrome Background- TOP

If you have a pure color background, you only need to set the background color for the body.

body{background:#FFF}

Set the page background to white

II. Regular background picture- TOP

1. Gradient the same background horizontally from top to bottom

Gradient width from top to bottom Full screen background effect screenshot

This kind of web page background only needs to cut out 1 pixel wide, height appropriate image as background material, as shown below:

Cut out such a vertical bar image material as background material

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

Set this image as a background image horizontally tiled at the top of the page, and the background is white. Note that the image path is set according to your image path.

2. Horizontal tiling background picture

For example, the 2014 version of DIVCSS5 webpage, the principle and gradient tile are the same, but also cut out a vertical bar as the Body background horizontal tile implementation, so that the full-screen webpage background is paved.

CSS cut out such a vertical bar effect screenshot

The code is the same as the first one, only the picture is different. Set the background image horizontally tiled for the body.

III. Irregular large picture background- TOP

It is common to see thematic or image web pages with a very large image background, while both widescreen and narrow-screen displays can usually display full-screen background images, just as images can adapt to their width. In fact, this implementation is also very simple, the width of this picture is large enough, such as the widest display resolution width on the market is 2560 pixels, then to make such a widescreen display browse this page can also cover the full screen, then your background picture must be made with a width greater than or equal to 2560px width, so that widescreen, narrow screen displays open this page can cover the full screen, minimize, maximize, Change the browser window to open the background image is full screen centered looks like the background image adaptive size.

Key: full-screen adaptive background picture The key is to make the picture wide enough to the widest resolution display can be spread, small resolution is naturally spread. At the same time, you need to set this background image as the body background and need to be centered.

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 the background of the web page, usually not tiled (no-repeat), horizontally centered, displayed on the top

IV. Head background picture and bottom background picture content How much height can be increased or decreased Head bottom background unchanged- TOP

Here DIVCSS5 introduces you to two common head and bottom different background picture tips to set the layout method.

1. Head and copyright pictures

This directly sets the head background image to the body background center display, the bottom copyright place DIV set width 100%; at the same time set the background image or background color.

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

In this way, the background at the bottom of the head can be different, and it is not affected by the height of the content.

2. The background image at the top of the web page and the background image at the bottom of the fixed bottom

The background image at the bottom is much higher than the box at the bottom of the copyright.

Screenshot of background effect with different background pictures at the top and bottom of the webpage, with content areas spanning the top and bottom

Such a structure is different from the top and bottom of the picture, and does not affect the background layout with the increase of the middle content. Usually, the html tag and the body can be set to the background.

If the top dark blue background image is "top.jpg" and the bottom light blue background image is "foot.jpg"

DIV CSS Settings Web Background Key CSS Code:

html{background: url(top.jpg) no-repeat center 0} body{background: url(foot.jpg) no-repeat center bottom}

Explanation: Set dark blue background picture to html background horizontal center top; Set light blue background picture to body background picture horizontal center bottom.

The above is "CSS how to set html page background image" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to 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.