feat(curriculum): add background and border example (#66398)

curriculum/challenges/english/blocks/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md

@@ -177,7 +177,7 @@ a:active {
 
 - **`background-size` Property**: This property is used to set the background size for an element. Some common values include `cover` for the background image to cover the entire element and `contain` for the background image to fit within the element.
 
-Here's an example using `background-size: contain`:
+Here's an example using `background-size: cover`:
 
 :::interactive_editor
 
@@ -194,6 +194,23 @@ Here's an example using `background-size: contain`:
 
 :::
 
+Here's an example using `background-size: contain`:
+
+:::interactive_editor
+
+```html
+<style>
+  body {
+    background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    min-height: 100px;
+  }
+</style>
+```
+
+:::
+
 - **`background-repeat` Property**: This property is used to determine how background images should be repeated along the horizontal and vertical axes. The default value for `background-repeat` is `repeat` meaning the image will repeat both horizontally and vertically. You can also specify that there should be no repeat by using the `no-repeat` property.
 
 Here's an example using `background-repeat: no-repeat`:
@@ -348,6 +365,7 @@ Here's an example using different `border-style` values:
 <div class="solid-border">Solid border</div>
 <div class="dashed-border">Dashed border</div>
 <div class="dotted-border">Dotted border</div>
+<div class="double-border">Double border</div>
 ```
 
 ```css
@@ -367,6 +385,11 @@ Here's an example using different `border-style` values:
   border: 3px dotted green;
   padding: 10px;
 }
+
+.double-border {
+  border: 3px double blueviolet;
+  padding: 10px;
+}
 ```
 
 :::