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:

div {
  width: 200px;
  height: 100px;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: 200px 0;
}

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:

div {
  width: 200px;
  height: 100px;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: 0 100px;
}

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:

div {
  width: 200px;
  height: 100px;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: 200px 100px;
}

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!