How to make the image display in the upper left corner with css

Method: 1. Use the "element {background-image:url(picture element);}" statement to set the image as the background image of the element; 2. Use the "element {background-position:left top;}" ” statement to position the background image and display it in the upper right corner.

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

How to display css images in the upper left corner

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

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

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

Summary:

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

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

3. In the css tag, set the background image to 1.png through the background-image attribute, set the background image to not be tiled through background-repeat, and set the background-position attribute to "left top". Control the background image in the upper left corner.

(Learning video sharing: css video tutorial)

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