Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Method 1: 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
selector {
float: left | right | inherit | initial | none;
}
| Value | Description |
|---|---|
left |
Floats the element to the left side of the container |
right |
Floats the element to the right side of the container |
inherit |
Inherits the float property value from the parent element |
none |
Sets the float to the default value (no float) |
initial |
Sets the float to the initial default value |
Example
The below code example will explain you the use of the float property to float or position images on the web page
<!DOCTYPE html>
<html>
<head>
<style>
.main-container {
border: 2px solid #333;
background-color: #f0f0f0;
padding: 20px;
overflow: auto;
}
.images {
height: 150px;
width: 150px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.image1 {
float: left;
}
.image2 {
float: right;
}
</style>
</head>
<body>
<h2>Setting 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">
<p>The first image uses <b>float: left;</b> property to position on left side, while the second image uses <b>float: right;</b> property to position on right side.</p>
<div class="images image1">Image 1</div>
<div class="images image2">Image 2</div>
<p>This text flows around the floated images as expected.</p>
</div>
</body>
</html>
A container with two colored boxes appears. Image 1 floats to the left side and Image 2 floats to the right side. The text flows around the floated images demonstrating proper float behavior.
Method 2: Positioning using object-position property
The object-position property is used to position the image within its content box. This property works with images and other replaced elements to control how content is positioned inside the element's box.
Syntax
selector {
object-position: x-position y-position;
}
| Value Type | Example | Description |
|---|---|---|
| Length values | 50px 20px |
Positions using specific pixel values from left and top |
| Percentage | 50% 50% |
Positions as percentage of container dimensions |
| Keywords | center top |
Uses keyword values: left, right, top, bottom, center |
Example
The below example will illustrate the use of the object-position property in CSS to position the image within its container
<!DOCTYPE html>
<html>
<head>
<style>
.main-container {
display: flex;
gap: 20px;
padding: 20px;
}
.container {
width: 300px;
border: 2px solid #333;
background-color: #f9f9f9;
padding: 15px;
}
.images {
height: 200px;
width: 100%;
background-color: #2196F3;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 10px 0;
object-fit: cover;
}
.image1 {
object-position: left top;
}
.image2 {
object-position: center center;
}
.image3 {
object-position: right bottom;
}
</style>
</head>
<body>
<h2>Setting image position using object-position</h2>
<div class="main-container">
<div class="container">
<p><b>object-position: left top;</b></p>
<div class="images image1">Left Top</div>
</div>
<div class="container">
<p><b>object-position: center center;</b></p>
<div class="images image2">Center</div>
</div>
<div class="container">
<p><b>object-position: right bottom;</b></p>
<div class="images image3">Right Bottom</div>
</div>
</div>
</body>
</html>
Three containers appear side by side, each containing a blue box with white text. The boxes demonstrate different object-position values: left top, center center, and right bottom positioning within their containers.
Conclusion
In this article, we have learned about positioning an image on the web page using CSS. The float property is useful for wrapping text around images, while the object-position property controls how content is positioned within its container. Choose the appropriate method based on your specific layout requirements.
2K+ Views
