CSS DIV background image

 The design of CSS DIV background image requires the use of the background-image property, which is a standard syntax used to design the background image of web page elements. The purpose is to insert a pre-prepared image into the web page itself or web page elements. background-color The simple background color is a little more complicated, but it can create a richer and more refined webpage DIV background image effect. If the style of the webpage needs the DIV background image to enhance the overall visual experience, you can read this CSS provided. Sample DIV background image.

In order to avoid misunderstandings, here is a description of the background-image attribute, which can only be used to insert background pictures, not the function of designing background pictures. To design pictures, you must use drawing software such as Photoshop, GIMP , Illustrator, Little Painter... Designed by the drawing software. Back to the topic, continue to see how to use background-image to insert a DIV background image.

CSS DIV background image example

<div style="background-image:url(background image);width:600px;height:400px;border:2px #ccc solid;"></div>

As mentioned in the first paragraph, the background image of the background-image design DIV will be a little more complicated than the background-color design of the background color. When you want to use the background image in the DIV , you usually need to design the width and height of the DIV , like an example In this way, add width (width:600px;) and height (height:400px;) attributes for the DIV block, so that the size of the background image can match the size of the DIV itself . For the design rules of the DIV size, please refer to : CSS DIV width and height settings .

The border in the example is only used to design the border, and has nothing to do with the DIV background image. Detailed description: CSS border .

Is CSS DIV background image so simple? Of course not only, CSS considers that different web page styles will have different background image presentation requirements. For example, should the background image move with the mouse up and down, or where should the background image be fixed, the upper left corner or the lower right corner? These articles can help you answer these questions.

• CSS background-position background image position
• CSS background-repeat repeated background image
• CSS background-attachment

Think DIV background image is too troublesome? In fact, you can design beautifully by using the background color directly, see this article: CSS DIV background color .