Open In App

How to set position of an image in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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: <position

Property 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.

HTML




<!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.

HTML




<!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:

Screenshot-2024-01-17-105815



Last Updated : 25 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads