How to display the background image completely in css

In CSS, you can use the "background-size" attribute to display the background image completely. This attribute is used to specify the size of the background image. You only need to add "background-size:100% 100%;" to the element. The style can display the background image completely.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to fully display the background image in css

When using div css to create a web page, sometimes it is necessary to display the entire background image within the div. So, how to use css settings? The following example explains how to use div css to control the full display of the background image.

1. Create a new html file, named test.html, to explain how div css controls the full display of background images. Create a module using div tags to add background images. Set the class attribute of the div tag to mydiv, which is mainly used to set the css style through this class below. Write the tag, and the CSS style of the page will be written in the tag.

Set the css style of the div through the class name mydiv, use the width attribute to set the width of the div to 300px, and use the height attribute to set the height of the div to 300px.

2. In the css tag, set the background image of the div to the 1.jpg image under the images folder through the background-image attribute, and use the background-size setting. The width and height ratio of the background image are 100%, that is, the entire background image is displayed.

Open the test.html file in the browser to check the effect.

Summary:

1. Create a test.html file.

2. Create a div module within the file.

3. In the css tag, set the width, height, and background image of the div, and then set the background width and height to 100% through the background-size attribute to display the entire background image.

Note:

If the width ratio of the div is different from the width and height ratio of the image, the background image setting will be fully displayed, which will cause deformation.

(Learning video sharing: css video tutorial)

The above is the detailed content of How to display the background image completely in css. For more information, please follow other related articles on the PHP Chinese website!