Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set position of an image in CSS?
In general, the default position of an image is left aligned on the web page. But you can change the position of an image according to your needs and set the position of an image manually on the web page where you have to show that particular image.
Let us now discuss about the ways of positioning an image on the webpage using CSS. There are two methods or approaches in general to position an image on the web page using CSS that are listed below −
Using the float property of CSS
Using the object-position property of CSS
Let us now understand the above approaches one by one in details to position an image on the web page with help of code examples.
Positioning using float property
The float property in CSS is used to define or set the float of any item or element on the web page. We can use this property to set the float of image to position it in a particular place on the web page.
Syntax
Below syntax will show how you can use the float property to set the position of an image −
float: left | right | inherit | initial | none;
Left − This value will float the elements on the left side on the web page.
Right − This value will float the elements on the right side on the web page.
Inherit − It will inherit the float property value from the parent of the element on which you are using it.
Initial | none − These property values will set the float to the initial or the default value.
Let us now understand this method of positioning the image on web page by implementing it practically with the help of code example −
Steps
Step 1 − In the first step, we will add a div element in the HTML document that contain the images.
Step 2 − In the next step, we will add two different images with classes inside the div container defined in previous step.
Step 3 − In the last step, we will use the classes to select the images and use the float property with different values to position them differently.
Example
The below code example will explain you the use of the float property to float or position images on the web page practically −
<!DOCTYPE html>
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
width: 100%;
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 30px;
}
.images{
height: 200px;
width: 200px;
}
.image1{
float: left;
}
.image2{
float: right;
}
</style>
</head>
<body>
<center>
<h2>Seting the position of an image in CSS</h2>
<p>The below images are positioned using the float property of CSS.</p>
<div class = "main-container">
<div class = "container-1">
<p>The first image contains <b> float: left; </b> property to position on left side, while the second image contains <b> float: right; </b> property to position on right side.</p>
<img class = "images image1" src = "https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" alt = "Image1">
<img class = "images image2" src = "https://play-lh.googleusercontent.com/FCMz5gMEQlgvAn99DzjX9Z2CuQ_MY2aInD1j87Y7uC1cimimyI2YjvHeqGVFyPW6EQ" alt = "Image2">
</div>
</div>
</center>
</body>
</html>
In the above example, we have used the two different images with different values for the float property to position or float them in different directions on the web page using CSS. We have used the flot property with left and right values to float the first image on the left side and second on right side of their container element.
Positioning using the object position property
The object position property is used to position the image with respect to the top and left coordinates of the content box which contains the image. The object position property can be used with different kind of values as discussed below −
Using numerical value − The object position property takes two numerical values. The former value specifies the space of the object from the left side of its container such that in horizontal direction ( x-axis ), while the later one specifies the distance from the top of parent container in vertical direction ( y-axis ).
Syntax
The below syntax will show how you can use the object position property with numerical values −
object-position: number_value px number_value px; // left distance top distance
String values − The object position property can also be used with the string values. You can simply specify the position of the object using the two values in pair at a time out of right | left |top | bottom values.
Syntax
Below syntax will help you understand the use of the object position property with string values −
object-position: right | left | top | bottom;
Let us now understand the practical implementation of the object position property and position an image on the web page using both type of values.
Approach
The approach of this example is very much similar to the algorithm of the above example. You just need to replace the float property in previous example with object-position property to position the image on the web page.
Example
The below example will illustrate the use of the object position property in CSS to position the image on the web page with different kind of values −
<!DOCTYPE html>
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
width: 100%;
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 30px;
}
.images{
height: 200px;
width: 200px;
overflow: visible;
}
.image1{
object-position: 50px 50px;
object-fit: cover;
}
.image2{
object-position: center top;
object-fit: cover;
}
</style>
</head>
<body>
<center>
<h2>Setting the position of an image in CSS</h2>
<p>The below images are positioned using the object position property of CSS. </p>
<div class = "main-container">
<div class = "container-1">
<p>The below image contains the <b> object-position: numerical_value; </b> property to position itself at the defined position.</p>
<img class = "images image1" src = "https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" alt = "Image1">
</div>
<div class = "container-1">
<p>The below image contains the <b> object-position: string_value; </b> property to position itself at the defined position.</p>
<img class = "images image2" src = "https://play-lh.googleusercontent.com/FCMz5gMEQlgvAn99DzjX9Z2CuQ_MY2aInD1j87Y7uC1cimimyI2YjvHeqGVFyPW6EQ" alt = "Image2">
</div>
</div>
</center>
</body>
</html>
In this example, we have used the object position property of CSS to position the image on the web page. We have used the object position property with numerical value with the first image to offset its position with given values from left and top. While, with the second image we used strimg values to position it.
Conclusion
In this article, we have learned about positioning an image on the web page. We have discussed about two different approaches to position the image with the help of float and the object-position property by implementing both of them practically inside the different code examples for each one of them.
145 Views
