Tips for setting background colors and images in css

In css, we can use background to set the background image and background color of HTML elements. It is very simple to set the background color, but it requires some skills to set the background image, this article describes how to use background and how to use it. For more information about coders, see. Set the background color:

To set the background color, use "background: color value. For example:

body{background:#000} 

Set the background color of the body to black.

Set the background image:

1. Regular background image.

It is better to set a gradient background image. For this background, you only need to cut out an image with a 1 pixel width and a suitable height as the background.

body{background: url("../images/body_bg.jpg") repeat-x rgb(222, 235, 243);} 

Instance:

   Tips for setting background colors and images in css    

Online operation

2. Irregular Images

We often see some special topics or image webpages. The background is a very large image as the background. In general, both wide screen and narrow screen displays full-screen background images, it is the same as the adaptive width of an image. In fact, this implementation is just as simple. The width of this image is designed to be large enough. For example, the resolution width of the widest display on the market is 2560 pixels, to enable such a wide-screen display to browse this page, you must make the background image of a width greater than or equal to the width of 2560px, in this way, the web page can be filled with full screen with wide screen and narrow screen display. To minimize, maximize, and change the size of the browser window, the background image is centered in full screen and looks like the adaptive size of the background image.

Key: the key to full-screen Adaptive Background images is that the images are sufficiently wide and can be filled with the widest-resolution display. Small resolutions are naturally full. At the same time, you need to set the background image as the body background and then center it.

body{background: url(bg.jpg) no-repeat center 0}

Code Description: set this image as the webpage background, which is usually not tiled (no-repeat). The image is horizontally centered and displayed on the top.