Home > Article > Web Front-end > How to position div based on images in css
In CSS, you can control the position of the image in the DIV through the background-position attribute. The specific steps are as follows: Horizontal positioning: The first value of background-position is the width of the image. Vertical positioning: The second value of background-position is the image height. Simultaneous positioning: background-position sets the width and height values at the same time.
Use CSS to position the DIV to match the image position
In CSS, you can use background-position
Attribute to control the position of the image within the div element. This property accepts two values: the first controls the horizontal position of the image, and the second controls its vertical position. Units can be pixels (px
), percentages (%), or keywords (left
, center
, right
, top
, bottom
).
Horizontal Positioning
To position a div horizontally based on an image, set the first value of background-position
to the width of the image. For example, if the image width is 200px, the CSS code would be:
<code class="css">div { width: 200px; height: 100px; background-image: url("image.jpg"); background-size: cover; background-position: 200px 0; }</code>
vertical positioning
To position the div vertically based on the image, you would background-position# The second value of ## is set to the height of the image. For example, if the image height is 100px, the CSS code would be:
<code class="css">div { width: 200px; height: 100px; background-image: url("image.jpg"); background-size: cover; background-position: 0 100px; }</code>
Position simultaneously
To position a div based on both the horizontal and vertical position of the image, you can position two Values are set to the corresponding image dimensions. For example:<code class="css">div { width: 200px; height: 100px; background-image: url("image.jpg"); background-size: cover; background-position: 200px 100px; }</code>
The above is the detailed content of How to position div based on images in css. For more information, please follow other related articles on the PHP Chinese website!