diff --git a/css - the complete guide/7. background_images_and_image.md b/css - the complete guide/7. background_images_and_image.md
new file mode 100644
index 0000000..5e68041
--- /dev/null
+++ b/css - the complete guide/7. background_images_and_image.md	
@@ -0,0 +1,121 @@
+# Understanding Background Images And Images
+
+## Understanding `background-size`
+
+The `background: url("");` property we have been using is actually a shorthand and can be replaced with `background-image: url("");`. 
+
+We can also use `background-color` to set a solid color.
+
+For sizing, we can use the `background-size` property, which takes in a couple of values. If we set `background-size: 100px` to a fairly larger element, the image will be repeated.
+
+We can disable the repeatition of image using the `background-repeat` property, we can assign it `no-repeat` to remove the repeatition, or we can use the other possible values `repeat-x` and `repeat-y`, to repeat the imaage horizontally or vertically.
+
+If you only assign a single value to `background-size` property, which is the `width` of the image, the `height` will be set automatically to maintain the aspect ration of the image. or you can assign both, `width` and `height`, e.g.` background-size: 300px 100px;`.
+
+We can also use `auto` (default, keeps the aspect ratio), `cover` (fills the entire container), `contain` (entire image is visible, can leave white space), `%` and other units with the `background-size` property. e.g. setting `background-size: 50%` will make the image take 50 percent of the element's width.
+
+
+## Working With `background-position`
+
+Excess parts of the image, that are cut-off for a larger image than the container, can be controlled using the `background-position` property. That is, you can decide which side of the excess image to crop. We can also control the absolute positioning of the image inside the container.
+
+
+We can see the available usage of the this property on its [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position).
+
+
+## Theory Time - `background` Shorthand
+
+* `backgound-image` (Set one or more background images)
+* `backgound-color`   (Set a background color)
+* `backgound-position`    (Set initial position, relative to background position layer)
+* `backgound-size`    (Set size of background image)
+* `backgound-repeat`  (Defines how background images are repeated)
+* `backgound-origin`  (Set background positioning area)
+* `backgound-clip`    (Define whether background extends underneath border)
+* `backgound-attachment`  (Sets the scrolling behavior of the background image)
+
+
+## Using The `background` Shorthand
+
+```css
+background: url("a.jpg") left 10% bottom 20%/cover no-repeat border-box padding-box;
+```
+
+
+## Styling Images
+
+The default behavior is when you add an `<img>` tag and set an image, the `width` and `height` of the `<img>` will be same as of the width and height of the original image. Changing the `width` and `height` of the container element doens't have any effect on the size of `<img>`.
+
+Changing lets say `height` of the `<img>` to `100%` will not change it height to fill the container, but it'll change its height to that of the original image used, unless the container is an `inline` or `inline-block`.
+
+
+## Working On The Image Layout
+
+```html
+<main>
+    <div>
+        <div class="testimonial" id="customer-1">
+            <div class="testimonial__image-container">
+                <img src="../images/customer-1.jpg" alt="Mike Statham - Customer" class="testimonial__image">
+            </div>
+            <div class="testimonial__info">
+                <h1 class="testimonial__name">Mike Statham</h1>
+                <h2 class="testimonial__subtitle">Founder of
+                    <a href="tech-analysis.com">tech-analysis.com</a>
+                </h2>
+                <p class="testimonial__text">uHost helped me realize my project with a highly constrained budget in like no time.</p>
+            </div>
+        </div>
+        ...
+    </div>
+<main>
+```
+
+```css
+.testimonial__image-container {
+    width: 65%;
+    display: inline-block;
+    vertical-align: middle;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
+}
+
+.testimonial__image {
+    width: 100%;
+    vertical-align: top;
+}
+```
+
+## Understanding Linear Gradients
+
+Gradients, both linear and gradial, are treated as images. We add a linear gradient by using the `linear-gradient()` css function on `background-image` or `background` shorthand properties. 
+
+
+## Applying Radial Gradients
+
+We add radial gradient using the `radial-gradient()` css function.
+
+
+## Stacking Multiple Backgrounds
+
+Using the shorthand `background` property, we can stack multiple backgrounds separated by a comma `,`. You can only set the `background-color` property once when stacking multiple backgrounds.
+
+```css
+background: linear-gradient(to top, rgba(80, 60, 18, 0.6) 10%, transparent), url("image.jpg") left 10% bottom 20%/cover no-repeat border-box, #ff1b68;
+```
+
+
+## Understanding Filters
+
+Filters allow us to change the visual appearence of an element by applying a `filter` like blurring, grayscale or changing the contrast etc:
+
+```css
+div {
+    background: brown;
+    filter: blur(10px);
+}
+```
+
+
+## Adding And Styling SVGs - The Basics
+
+...
\ No newline at end of file
diff --git a/css - the complete guide/8. sizes_and_units.md b/css - the complete guide/8. sizes_and_units.md
new file mode 100644
index 0000000..094de61
--- /dev/null
+++ b/css - the complete guide/8. sizes_and_units.md	
@@ -0,0 +1,49 @@
+# Dimensions, Sizes And Units
+
+## Where Unit Matters
+
+### Pixels, Percentages & More
+
+| Units | Sign |
+| --- | --- |
+| pixels | px |
+| percentages | % |
+| root em | rem |
+| em | em |
+| viewport height | vh |
+| viewport width | vw |
+
+### Some questions?
+
+Which properties can you use in connection with these units?
+How is the size calculated?
+What's the right unit to choose?
+
+### Where Units Matter
+
+Keeping the CSS box model in mind, going inside out, e.g from content to padding to border to margin. Lets see where we can apply these units.
+
+`font-size`, `padding`, `border`, `margin`, `width`, `height`, `top`, `bottom`, `left`, `right`.
+
+
+## An Overview Of Available Sizes And Units
+
+### How is the Size Calculated?
+
+| **Absolute Lengths** | **Viewport Lengths** | **Font-Relative Lengths** |
+| --- | --- | --- |
+| Mostly ignore user settings | Adjust to current viewport | Adjust to default font size |
+| `px` | `vh` | `rem` |
+| `cm` |  | `vw` | `em` |
+| `mm` |  | `vmin` | `...` |
+| `...` |  | `vmax` |  |
+
+Also, percentage `%` is another special unit used.
+
+### How is the Box Size for % Units Calculated?
+
+To understand how `%` units are calculated, we first need to understand the concept of **containing blocks**.
+
+
+##  Rules to Remember Fixed Positioning & `%`
+