Background position (#4076)

* background-position examples

Uploaded background-position examples to represent existing code blocks.

* Update background-position.md

Added image links to media folder to represent the example code blocks.

* Uploaded fixed background-position example

Fixed alignment on the example image.

* Update background-position.md

Added short sentence before each image.

---------

Co-authored-by: SSwiniarski <[email protected]>

content/css/concepts/background/terms/background-position/background-position.md

@@ -41,6 +41,10 @@ Set background image position to the top right corner of `.hero` class element:
 }
 ```
 
+The following is the result of the code block above:
+
+![Background image on top right of the browser](https://raw.githubusercontent.com/Codecademy/docs/main/media/background-position-example-1.png)
+
 ## Example 2
 
 Use percentages to place background image in the middle of the element:
@@ -53,6 +57,10 @@ Use percentages to place background image in the middle of the element:
 }
 ```
 
+The following is the result of the code block above:
+
+![Background image in the middle](https://raw.githubusercontent.com/Codecademy/docs/main/media/background-position-example-2.png)
+
 ## Example 3
 
 Use pixels to place background image `100px` down the y-axis and `100px` along the x-axis:
@@ -65,6 +73,10 @@ Use pixels to place background image `100px` down the y-axis and `100px` along t
 }
 ```
 
+The following is the result of the code block above:
+
+![Background image 100px down and 100px right](https://raw.githubusercontent.com/Codecademy/docs/main/media/background-position-example-3.png)
+
 ## Example 4
 
 Position multiple images:
@@ -76,3 +88,7 @@ Position multiple images:
   background-position: top left, bottom right;
 }
 ```
+
+The following is the result of the code block above:
+
+![Two background images in different positions](https://raw.githubusercontent.com/Codecademy/docs/main/media/background-position-example-4.png)