added article for this stub (#21818)

added 3 ways for full page background image

removed comments, updated links to github markdown style

guide/english/css/tutorials/perfect-full-page-background-image/index.md

@@ -3,11 +3,82 @@ title: Perfect Full Page Background Image
 ---
 ## Perfect Full Page Background Image
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/tutorials/perfect-full-page-background-image/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+Here is three ways you can achieve the full page background image and I listed the advantage of each solution.
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+### Solution 1
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+The advantages of this solution:
+
+* fits to specific viewports
+* perfect for hudge banner image
+* still allows you to add content after
+* no whitespace in the viewport.
+
+html:
+
+```
+<div class="bg-image"> </div>
+```
+css:
+
+```
+.bg-image
+{
+  background-size: cover;
+  background-image: url('myimage.jpg');
+  height: 100vh;
+}
+```
+[Codepen for solution 1](https://codepen.io/takachou/pen/pxVPGY/)
+
+### Solution 2
+
+This uses the image as a background for the div. This solution allows you to add content down.
+
+html:
+
+```
+<div class="bg-image"> </div>
+```
+
+css:
+
+```
+body, html {
+	height: 100%;
+}
+
+.bg-image {
+    background-image: url("myimage.jpg");
+    height: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+```
+
+[Codepen for solution 2](https://codepen.io/takachou/pen/gBzRwK)
+
+### Solution 3 [credits](https://css-tricks.com/perfect-full-page-background-image/)
+This Solution contains some specifics:
+
+* Fills entire page with image, no white space
+* Scales image as needed
+* Retains image proportions (aspect ratio)
+
+
+```
+html { 
+  background: url(images/bg.jpg) no-repeat center center fixed; 
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+```
+[Codepen for solution 3](https://codepen.io/takachou/pen/bmMRgz)
 
 #### More Information:
-[CSS Tricks - Perfect Full Page Background Image](https://css-tricks.com/perfect-full-page-background-image/)
+- [How TO - Full Page Image](https://www.w3schools.com/howto/howto_css_full_page.asp)
+- [CSS-Tricks - Perfect Full Page Background Image ](https://css-tricks.com/perfect-full-page-background-image/)
+