To change the position of an image in CSS, you can use properties such as object-position and float. The object-position property aligns the position of the image within its container using x and y coordinates. On the other hand, the float property is used to move an element within the container to the left or right of the image placement.
Using object-position Property
object-position property precisely used to set the position of an image within its container, allowing you to control its alignment and placement without altering the overall layout.
Syntax:
object-position: <positionProperty values:
- position: It takes 2 numerical values corresponding to the distance from the left of the content box (x-axis) and the distance from the top of the content box (y-axis) respectively.
Example: Implementation to set position of an image using object-position property.
<!DOCTYPE html><html>
<head>
<title>To set position of an image</title>
<style>
h2 {
color: green;
}
#object1 {
width: 500px;
height: 200px;
background-color: green;
object-fit: none;
object-position: center top;
}
#object2 {
width: 500px;
height: 200px;
background-color: green;
object-fit: none;
object-position: 50px 30px;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h4>object-position Property</h4>
<img id="object1" src=
<img id="object2" src=
</body>
</html>
|
Output:
object-position
Using float Property
CSS float property to position an image within its container, enabling left or right alignment while allowing text or other elements to flow around it, influencing the layout and design. Adjust the float value to determine the image’s placement.
Note: Elements are floated only horizontally i.e. left or right
Syntax:
float: none | inherit | left | right | initial;Property Value:
| Value | Description |
|---|---|
| left | Positions an element on the right side of its container. |
| right | Positions an element on the left side of its container. |
| inherit | Element inherits the floating property from its parent elements, such as divs or tables. |
| none | Default value, displays the element as it is without any specific positioning. |
Example: In this example, we are using the above-explained method.
<!DOCTYPE html><html>
<head>
<title>To set position of an image</title>
<style>
h2 {
color: green;
}
#object1 {
width: 300px;
height: 200px;
float: right;
}
.container {
height: 400px;
width: 800px;
border: 2px solid green;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h4>Float Property</h4>
<div class="container">
<img id="object1" src=
</div>
</body>
</html>
|
Output: