How to set the background image of a web page in HTML

Today I will talk to you about how to set the background image of a web page in HTML. We use the layout thinking of the entire web page to see what methods can be set and what are the differences between each method. And tips for setting background images

Single color background of web pages

If you have a pure color web page background, you only need to set the backgroundbackground color to the body

body{background:#FFF}

Set the background of the web page to white

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

Set it like this This Picture is a background picture that is tiled horizontally against the top of the web page. The background is white. Here, pay attention to setting the imported picture path according to your picture path.

2. Horizontal tile background image

For example, the 2014 version of the web page has the same principle as gradient tile. It also cuts out a vertical strip and uses it as the Body background to tile it horizontally, so that it becomes full screen. The background of the web page is full.

The code is the same as the first one, just the pictures are different. Set the background image to be tiled horizontally on the body.

Irregular large picture background

We often see some thematic or image web pages. The background is a very large picture as the background, and usually both widescreen and narrowscreen monitors can display the full picture. full-screen background image, just like the image can adapt to the width and size. In fact, this implementation is very simple. Make the width and art design of this picture large enough. For example, the width of the widest display screen resolution on the market is 2560 pixels. If you want such a wide-screen display to browse this web page, it can fill the entire screen. Then you The background image must be made with a width greater than or equal to 2560px, so that the web page can fill the full screen when opened on widescreen or narrow screen monitors, and the background image can be opened in full screen when minimizing, maximizing, or changing the browser window. The centered one looks like the background image adaptively resizes.

Key: The key to a full-screen adaptive background image is to make the image wide enough so that it can fill the display screen with the widest resolution, and naturally it will fill the entire screen with a smaller resolution. At the same time, you need to set the background image like this as the body background and need to be centered.

If this background image is: bg.jpg

Set the 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 at the top

The height of the head background image and bottom background image content can be increased or decreased. The head and bottom background remain unchanged

Here are two common header and bottom background images. Different background image techniques at the bottom set the layout method.

This method directly sets the head background image to the body background to be displayed in the middle and upper part, and the bottom copyright area DIV sets the width to 100%; at the same time, set this 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 of the head and bottom can be different without being affected by the height of the content.

The background image at the bottom far exceeds the height of the copyrighted bottom box.

Such a structure has different pictures at the top and bottom, so that it does not affect the background layout as the middle content increases. This can usually be achieved by setting the background for the html tags and body.

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

DIV CSS sets the key CSS code for web page background:

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 as the html background to be horizontally centered and upper; set the light blue background image to be the body background image horizontally centered and lower.

The above is a summary of several common web page background layout settings. Flexible settings can set the background for body, html, and div to achieve the background effect you want. If the div is set to the background of this web page, then the height of this DIV It cannot be set (default is automatic), and the div width can be set to 100%.

That’s it for setting the web page background image. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to set the font color in HTML

How to enter space characters in HTML

Why do we need to set CSS styles on DIV?

The above is the detailed content of How to set the background image of a web page in HTML. For more information, please follow other related articles on the PHP Chinese website!