How to adjust image position in css-CSS Tutorial-php.cn

How to adjust image position in css

藏色散人

Release： 2023-01-04 09:37:27

Original

25530 people have browsed it

How to adjust the position of the image in css: 1. Use the position attribute to control the position of the image introduced by the "" tag; 2. Use the "background-position" attribute to set the starting position of the background image.

How to adjust image position in css

The operating environment of this tutorial: windows7 system, css3 version, Dell G3 computer.

Let’s take a look at the detailed explanation of the method of controlling the image position with css:

1. Use the position attribute to control the image position

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>css控制图片位置</title>
</head>
<body>
<div style="width:500px;height:400px;border:1px solid red;position:relative;">
<img  src="img/4.jpg"   style="max-width:90%"/ alt="How to adjust image position in css" >
</div>
</body>
</html>

Copy after login

The effect is as follows

How to adjust image position in css

The position attribute specifies the positioning type of the element.

This attribute defines the positioning mechanism used to establish the layout of the element. Any element can be positioned, but absolute or fixed elements generate a block-level box, regardless of the type of the element itself. A relatively positioned element is offset from its default position in normal flow.

Attribute value:

absolute generates an absolutely positioned element, positioned relative to the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

fixed Generates absolutely positioned elements, positioned relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

relative Generates a relatively positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position.

static Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

inherit specifies that the value of the position attribute should be inherited from the parent element.

2. The background-position attribute sets the starting position of the background image.

<html>
<head>
<style type="text/css">
body
{ 
  background-image:url(&#39;/i/eg_bg_03.gif&#39;);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}
</style>
</head>
<body>
<body>
<p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，
才能保证该属性在 Firefox 和 Opera 中正常工作。</p>
</body>
</body>
</html>

Copy after login

The effect is as follows:

How to adjust image position in css

The background-position property sets the starting position of the background image.

This property sets the position of the original background image (defined by background-image). If the background image is to be repeated, it will start from this point.

Tip: You need to set the background-attachment property to "fixed" to ensure that this property works properly in Firefox and Opera.

Recommended: "css video tutorial"

The above is the detailed content of How to adjust image position in css. For more information, please follow other related articles on the PHP Chinese website!