How to set position of an image in CSS ?
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.
Table of Content
- Using object-position Property
- Using float Property
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 >w3wiki</ h2 > < h4 >object-position Property</ h4 > < img id = "object1" src = "https://media.w3wiki.net/wp-content/uploads/20240117104925/1.png" /> < img id = "object2" src = "https://media.w3wiki.net/wp-content/uploads/20240117104925/1.png" /> </ body > </ html > |
Output:
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 >w3wiki</ h2 > < h4 >Float Property</ h4 > < div class = "container" > < img id = "object1" src = "https://media.w3wiki.net/wp-content/uploads/20240117104925/1.png" /> </ div > </ body > </ html > |
Output:
Contact Us