How to Set Position of an Image in CSS?

Last Updated : 14 Nov, 2024

To change the position of an image in CSS, properties like object position and float are used to control the placement of an image within its container.

1. Using object-position Property

The object-position property in CSS is used to set the position of an image within its container when using the object-fit property. It allows you to adjust how the image is displayed inside the box by specifying the alignment in terms of x and y coordinates.

Syntax

object-position: <x-position> <y-position>;

Property Values

x-position: The horizontal alignment (distance from the left of the content box).
y-position: The vertical alignment (distance from the top of the content box).

HTML

<h4>object-position Property</h4>

<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240117104925/1.png"
     style="width: 500px; height: 200px; 
            object-fit: none; object-position: center top; 
            border: 2px solid black;" />

<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240117104925/1.png"
     style="width: 500px; height: 200px; 
            object-fit: none; object-position: 50px 30px; 
            border: 2px solid black;" />

Output

2. Using float Property

The float property in CSS is used to position an image to the left or right of its container. It allows text and other content to wrap around the image, creating a flowing layout.

Note: Elements are floated only horizontally i.e. left or right

Syntax

float: none | left | right | inherit | initial;

HTML

<h4>Float Property</h4>

<div style="height: 400px; width: 800px; border: 2px solid green;">
	<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240117104925/1.png"
		 style="width: 300px; height: 200px; float: right;" />
</div>