Home  >  Article  >  Web Front-end  >  How to position div based on images in css

How to position div based on images in css

下次还敢
下次还敢Original
2024-04-28 13:15:26418browse

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.

How to position div based on images in css

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn