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

This article mainly explains "how css displays the background image completely". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how css displays the background image completely".

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

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

How does css display the background image completely

When using div+css to make a web page, sometimes you need to display all the background pictures in div, so how to use the css setting? Here is an example of how div+css controls the display of background images.

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

The css style of div is set by the class name mydiv, the width of div is set to 300px using the width property, and the height of div is set to 300px using the height property.

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

Open the test.html file in the browser to see the effect of the implementation.

Thank you for your reading, the above is the content of "how to display the background image completely by css". After the study of this article, I believe you have a deeper understanding of how css shows the background image completely, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.