Learn CSS

"If you want to learn how to style and design web pages, you need to master CSS. CSS stands for Cascading Style Sheets, and it is the language that defines the appearance and layout of HTML elements. In this course, you will learn the basics of CSS, such as selectors, properties, values, units, and colors. You will also learn how to use CSS to create responsive web design, animations, transitions, and more. By the end of this course, you will be able to create beautiful and functional web pages using CSS."

CSS Chapters Menu

CSS The object-position Property

The object-position property in CSS is used to set the position of the replaced element within its container. The replaced element could be an image, video, or other types of media. The object-position property is usually used in combination with the object-fit property to control the behavior of the replaced element within its container.

The object-position property accepts two values: a horizontal and a vertical value. These values can be expressed using any of the length, percentage, or keyword values. The horizontal value specifies the position of the replaced element along the x-axis, while the vertical value specifies the position of the replaced element along the y-axis.

 

Syntax

Here is the syntax for the object-position property:


object-position: x-axis y-axis;


The following are the possible values for the object-position property:

  1. length value: This can be a positive or negative value, and it represents the distance from the left or top edge of the container. For example, object-position: 10px 20px will position the replaced element 10 pixels from the left edge and 20 pixels from the top edge of the container.
  2. percentage value: This represents the position of the replaced element as a percentage of the container's width or height. For example, object-position: 50% 25% will position the replaced element at the center of the container horizontally and 25% from the top of the container vertically.
  3. keyword value: This can be any of the following values: left, right, center, top, bottom. For example, object-position: right bottom will position the replaced element at the bottom-right corner of the container.

 

Example

Here is an example of how to use the object-position property:


img {
 width: 400px;
 height: 300px;
 object-fit: cover;
 object-position: center;
}


In the above example, we have an img element with a width of 400 pixels and a height of 300 pixels. The object-fit property is set to cover to ensure that the image covers the entire container. The object-position property is set to center to position the image at the center of the container.