CSS Image Positioning

You can position an image in CSS using right, bottom, center, and top properties. These properties are used in conjunction with the background-position property to specify the position of the background image. 

body {
	background-image: url("trol.jpg");
	background-repeat: no-repeat;
	
	background-attachment: fixed;
	background-position: right bottom;
}

The background-position property is set to right bottom, which positions the background image at the bottom right corner of the element. The background-attachment property is set to fixed, which means that the background image is fixed relative to the viewport and doesn't move when the user scrolls the page. 

"Relative to viewport" refers to the position of an element on the screen based on the visible portion of the web page or application. The viewport is the visible portion of the web page or application displayed within the user's browser window. It is the area of the web page or application that the user can see without scrolling.

In CSS, when using the values "fixed" or "absolute" for the "position" property, the positioning of the element is based on the viewport, whereas when using "relative" or not specifying a value, the positioning is based on the element's normal position in the document flow. This is why "position: fixed" is often used to create elements that stay in the same position on the screen even when the user scrolls the page.

left top
left center
left bottom

right top
right center
right bottom

center top
center center
center bottom

The combinations we listed are values for the background-position property in CSS. They define the position of a background image relative to the container element. Here's what they mean:

• left top: The background image is aligned to the left and top edges of the container.
• left center: The background image is aligned to the left edge of the container and vertically centered.
• left bottom: The background image is aligned to the left and bottom edges of the container.
• right top: The background image is aligned to the right and top edges of the container.
• right center: The background image is aligned to the right edge of the container and vertically centered.
• right bottom: The background image is aligned to the right and bottom edges of the container.
• center top: The background image is horizontally centered and aligned to the top edge of the container.
• center center: The background image is both horizontally and vertically centered within the container.
• center bottom: The background image is horizontally centered and aligned to the bottom edge of the container.