How to Position an Image in CSS?
FREE
Overview
The image position in CSS can be changed by using CSS properties like object-position property and float property. Object-position property is used to align the position with respect to the x,y coordinates of the image within its container. The float property is used to float an element inside the container toward the left or right side.
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
Pre-requisite
You should know how to use CSS properties on elements. This article will explain the object-position property and float property with an example that will be easy to understand.
Syntax
1. object-position property: The Syntax of object position property :
position can be a numerical value that specifies the distance from the left of the content box(i.e x axis) and the distance from the top of the content box (i.e., y-axis). It can also take values like left, right, top, bottom, and initial and inherit them as a string to specify the position.
2. Float property: The Syntax of the float property :
Turn Learning into Career Growth
Methods
Method 1: Using object-position Property
object-position property: The object position property is used to position any element within a container to the required position within the container. The < img > element or < video > element are mostly positioned within a container using the object position property.
Syntax
The Syntax for the object position property is
Position can take numerical, specific string values, percentage, length, and edge offsets values. Some values are shown in the examples below.
Example Let's see a simple example of object position property and place the img to the top left of the container.
Output :
Method 2: Using float Property
float property: float property is used to change the image position in CSS to the extreme left or extreme right of the container. Float is used to position an element only horizontally. The Syntax of the float property is as follows:
here,
left: place the element to the extreme left of the container right: place the element to the extreme right of the container inherit: inherits floating property from its parent (div, semantic element, etc.) none: element is displayed at its original position as it is.
Some examples of float properties values are as follows:
Let's take an example in which float property is being used on an actual image :
The output of the above HTML code using the float right property is:
Conclusion
- object-property and float properties are used to position an element inside a container.
- object-position property can be used to change the image position in CSS both horizontally as well as vertically within the container of the image.
- float property can be used to change the image position in CSS horizontally within the container of the image.
- The position property in the object position can take both numerical values as well as some specified string values like left, right, top and bottom.
- Float property takes some specific values like left, right, inherit, and none.
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
See Also:
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more