diff --git a/README.md b/README.md
index 28d6bec..966c82b 100644
--- a/README.md
+++ b/README.md
@@ -36,8 +36,9 @@ import CircularProgressbar from 'react-circular-progressbar';
 | Name | Description |
 | ---- | ----------- |
 | `percentage` | Numeric percentage to display, from 0-100. Required. |
-| `strokeWidth` | Width of circular line. Default: `8`. |
 | `className` | Classes to apply to the svg element |
+| `strokeWidth` | Width of circular line as a percentage relative to total width of component. Default: `8`. |
+| `backgroundPadding` | Padding between background and edge of svg as a percentage relative to total width of component. Default: `0`. |
 | `initialAnimation` | Toggle whether to animate progress starting from 0% on initial mount. Default: `false`. |
 | `classForPercentage` | Function which returns an additional class to apply to top-level svg element, which can be used for coloring/styling percentage ranges differently. Example: `(percent) => percent < 100 ? 'incomplete' : 'complete'`. |
 | `textForPercentage` | Function which returns text to display, can be configured based on percentage. Example: ``(pct) => `${pct}%` ``. |
diff --git a/docs/demo.jsx b/docs/demo.jsx
index 1dfe78b..b01e418 100644
--- a/docs/demo.jsx
+++ b/docs/demo.jsx
@@ -6,20 +6,6 @@ console.log(`react-circular-progressbar v${COMPONENT_VERSION}`);
 
 const githubURL = 'https://github.com/iqnivek/react-circular-progressbar';
 
-const Config = ({ name, example, description, children }) => (
-  <div className="row mb-3">
-    <div className="col-xs-12 col-md-6 offset-md-3">
-      <p><code>{name}</code><small className="text-muted ml-1">{example ? `e.g. ${example}` : null}</small></p>
-      <p>{description}</p>
-      <div className="row">
-        <div className="col-xs-4 offset-xs-4">
-          {children}
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
 const Example = ({ description, children }) => (
   <div className="col-xs-12 col-sm-4">
     <div className="row mb-1">
@@ -60,7 +46,7 @@ class Demo extends React.Component {
   render() {
     return (
       <div className="container">
-        <div className="row my-3">
+        <div className="row mt-3">
           <div className="col-xs-12">
             <div className="text-xs-center">
               <h1 className="mb-2">{COMPONENT_NAME}</h1>
@@ -69,7 +55,7 @@ class Demo extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-3">
+        <div className="row mt-3">
           <div className="col-xs-6 offset-xs-3 col-md-2 offset-md-5">
             <ChangingProgressbar
               percentages={[0, 20, 40, 60, 80, 100]}
@@ -77,16 +63,12 @@ class Demo extends React.Component {
           </div>
         </div>
 
-        <div className="text-xs-center my-3">
-          <p>Install with npm:</p>
-          <p className="mb-3"><code>npm install {COMPONENT_NAME}</code></p>
-          <a className="btn btn-info btn-lg" href={githubURL}>View project on Github</a>
-        </div>
-
         <hr />
         <div className="row mt-3">
+          <h2 className="text-xs-center mb-3">Styled with plain CSS.</h2>
+
           <Example
-            description="Configure color/styling based on percentage using plain old CSS classes."
+            description="Change color/styling based on percentage."
           >
             <ChangingProgressbar
               percentages={[75, 100]}
@@ -107,11 +89,11 @@ class Demo extends React.Component {
           </Example>
 
           <Example
-            description="Add a background color."
+            description="Add a background color for that inverted look."
           >
             <CircularProgressbar
               className="background"
-              backgroundGutter={4}
+              backgroundPadding={4}
               strokeWidth={6}
               percentage={33}
             />
@@ -119,42 +101,13 @@ class Demo extends React.Component {
         </div>
 
         <hr />
-        <h2 className="text-xs-center my-3">Props</h2>
-
-        <Config
-          name="percentage"
-          example="44"
-          description="Percentage to display."
-        />
-        <Config
-          name="strokeWidth"
-          example="10"
-          description="Width of circular line"
-        />
-        <Config
-          name="className"
-          example="'your-css-class'"
-          description="Classes to apply to the svg element"
-        />
-        <Config
-          name="initialAnimation"
-          example="false"
-          description="Toggle whether to animate progress starting from 0% on initial mount."
-        />
-        <Config
-          name="classForPercentage"
-          example="(pct) => pct < 100 ? 'incomplete' : 'complete'"
-          description="Function which can set an additional class to apply to top-level element, which can be used for coloring/styling percentage ranges differently."
-        />
-        <Config
-          name="textForPercentage"
-          example="(pct) => `${pct}%`"
-          description="Function which sets text formatting given a percentage."
-        />
-
-        <hr />
-        <div className="text-xs-center my-3">
-          <a className="btn btn-info btn-lg" href={githubURL}>View project on Github</a>
+        <div className="row mt-3 mb-3">
+          <h2 className="text-xs-center">Installation</h2>
+          <div className="text-xs-center mt-3">
+            <p>Install with npm:</p>
+            <p className="mb-3"><code>npm install {COMPONENT_NAME}</code></p>
+            <a className="btn btn-info btn-lg" href={githubURL}>View docs on Github</a>
+          </div>
         </div>
       </div>
     );
diff --git a/src/index.jsx b/src/index.jsx
index aac57c6..6d8b1b5 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -58,7 +58,7 @@ class CircularProgressbar extends React.Component {
   getPathRadius() {
     // the radius of the path is defined to be in the middle, so in order for the path to
     // fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth
-    return 50 - (this.props.strokeWidth / 2) - this.props.backgroundGutter;
+    return 50 - (this.props.strokeWidth / 2) - this.props.backgroundPadding;
   }
 
   render() {
@@ -108,7 +108,7 @@ CircularProgressbar.propTypes = {
   percentage: PropTypes.number.isRequired,
   strokeWidth: PropTypes.number,
   className: PropTypes.string,
-  backgroundGutter: PropTypes.number,
+  backgroundPadding: PropTypes.number,
   initialAnimation: PropTypes.bool,
   classForPercentage: PropTypes.func,
   textForPercentage: PropTypes.func,
@@ -117,7 +117,7 @@ CircularProgressbar.propTypes = {
 CircularProgressbar.defaultProps = {
   strokeWidth: 8,
   className: '',
-  backgroundGutter: 0,
+  backgroundPadding: 0,
   initialAnimation: false,
   textForPercentage: (percentage) => `${percentage}%`,
 };