How to display the picture in the upper left corner by css

This article is about how css makes the image appear in the upper left-hand corner. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Methods: 1, use the "element {background-image:url (picture element);}" statement to set the picture as the background picture of the element; 2, use the "element {background-position:left top;}" statement to locate the background picture, so that the background picture can be displayed in the upper right corner.

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

1. Create a new html file, named test.html, to explain how css+div makes the upper left corner of the background image div. Use div to create a module for testing. Add a class attribute to the div tag and set it to mybg.

2. Within the css tag, set the style of div through class, define its width 300px, height 300px, and border 1px. Then through the background-image property to set the background picture to 1.png, through the background-repeat to set the background picture is not tiled, and set the background-position property to "left top" to control the background picture in the upper left corner.

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

Summary:

1. Use div to create a module and add a class attribute to the div tag.

2. Within the css tag, set the style of div through class, define its width 300px, height 300px, and border 1px.

3. Within the css tag, set the background picture to 1.png through the background-image attribute, set the background picture to non-tile through background-repeat, and set the background-position property to "left top" to control the background picture in the upper left corner.

Thank you for reading! This is the end of the article on "how to make the picture display in the upper left corner of css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!