html

How to Move an Image in CSS

You may layout your site and change the relevant pictures using the Cascading Style Sheets (CSS). For such jobs, CSS provides a variety of alternatives. CSS, to its credit, also covers a wide variety of image formats and kinds including raster as JPEG, vector such as SVG, combination, and lifeless pictures.

There are several techniques to position the picture such as utilizing the object-position property or the float property. We are going to discuss both of these techniques with practically implemented example codes in this article.

Utilizing the Object-Position Property

The object-position property sets the x and y coordinates for an image element’s location within its content container. The default value of the object-position whenever invoking the object-fit attribute is 50%. As a result, all graphics are placed in the middle of the respective content container by default. By using the object-position attribute, you can adjust the default alignment of the object-position property functions similarly to the preserveAspectRatio<align > argument in SVG. To specify both sizes as well as the position of the external graphics included in HTML, the object-position attribute is exercised. Specifically, the pictures included within the <img> tag may also be used on other sorts of substituted components such as <iframe>, <video>, and <embed>.

The syntax for the object-position property is:

Object-position <position> |initial |inherit;

The image’s placement within the box is determined by the object-position property’s <position> value. This option specifies the picture or the video’s placement within the container of elements.  It takes two arithmetical numbers – the first of which sets the x-axis, whereas the other handles the y-axis. It might be a number such as in pixels or percentages or it can be a string such as right, center, top, left, etc. Moreover, it also permits using the negative numbers.

The “initial” option assists in determining the default value for the said attribute.

The “inherit” property is passed down from the parent node.

The way to specify how an entity like an image or video would fit inside its box. “Contain” is utilized to fit by aspect ratio, “fill” fills the object elongation, and “cover” spills over the container but retains the ratio. These are the object-fit choices while the object-position permits the item to be relocated like the background picture.

The CSS attributes like object-fit, as well as object-position, allows the programmers to power on the material within an image or video component. The object-position attribute assists you in positioning your element within the HTML.

We can put any HTML attribute in whatsoever place you prefer. Based upon the parent, you can choose if the object upon that screen should be put adjacent toward its natural placement or shoud be absolute.

We will perform some examples to understand the utilization of the object-position in CSS for positioning an image.

Example 1: Object-Position: Center Top

For the practical implementation of all the examples, we use the “sublime” text editor. Beginning with the code, at the very first line, we define the document type which is HTML. Now, commencing with the HTML code, the HTML code is divided into two portions: head and body.  The HTML <head> tag contains the information/data about the data; you can write the title of the webpage and add the CSS code to it. While the <body> tag can store the hyperlinks, images, lists, headings, etc.

In this example, the string values such as center top, left top, or right top are used. Inside the <head> tag of the HTML document, we used the <title> tag and added a title, then closed the tag. The next thing we did was open a <style> tag which is a CSS tag to set the information of our object. Within the <style> tag, we used an object with the name “center” and defined its parameters: width, height, border, background color, object-fit, and object position. The <style> tag is closed after that, followed by closing the </head> tag.

In the previous chunk of code, the < img> tag was given the CSS styles as well as the object-fit attribute which describes how the picture should be shrunk to suit its container. And the object-position attribute which indicates how the image must be placed in the container using the x and y dimensions. We set the object position in the code to the “center top”.

In the <body> section of the HTML, we added a heading. Inside the image, the tag added the source of the image. Now, close the </body> tag and then the </html> tag.

We open it in the “internet explorer” which shows the following output:

Example 2: Object-Position: Left Top

As in the last example, the code makes use of the object-fit and object-position attributes. The object position is set to the left top in this example.

You can see that the webpage displays the following image:

Example 3: Object-Position: Right Top

Now, we make an example that shows the picture in the content container on the right side of the top. This means that from the right side, at the top of the box, the picture is displayed at the “right” most position of the box.

The previous code successfully displayed the image in the right top position of the container. 

Example 4: Object-Position: Initial

The initial attribute is implemented in the preceding example to fix the object to 50% and 50%. The picture is added to the center of the material container by default. The initial keyword creates an object with the property’s initial stipulation. It may be enabled on any CSS property and causes the element to utilize the property’s original value.

The webpage exhibits an image that is placed in the middle of the container holding the content of the objects.

Utilizing the Float Property

The float attribute in CSS is used to position the elements. It allows the other elements to enfold around a component that has been pushed to the left or right. It is most associated with photos and layouts.

Only the horizontally floating elements are exercised. As a result, only the left and right floating is feasible, not tup and down floating. If the picture floats to the right, the content flows to the left wrapped around it. And if the image floats to the left, the text streams to the right enfolded around it.

The syntax it follows is:

Float: none|left|right|initial|inherit;

The “none” value indicates that the element will not be floated and will appear exactly where it appears in the text.

In this example, we demonstrated the float:right property where the text is wrapped around the image on the right side of the elements. In the <body> tags, we used the dummy text data which is shown with the image that we provided within the <img> tag.

In the previous snippet, we exercised the “float” property with the “right” value which can be seen in the output image.

In the same way, you can add the other values of the “float” property.

 Conclusion

In this article, we discussed the two methods to move or position an image in the HTML CSS using a sublime text editor. We explained in detail the object-position property with the different example codes and showed you the output results as well. The other property we briefly discussed in this writing is the float property. This property also helps us in positioning the image in CSS. Along with dedication and concentration to learning new concepts, this piece of writing is beneficial to your web development journey.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.