Add support for background images in CSS

Author: taniarascia

config/webpack.common.js

@@ -63,6 +63,7 @@ module.exports = {
     extensions: ['.js', '.jsx', '.json'],
     alias: {
       '@': paths.src,
+      assets: paths.public,
     },
   },
 }

public/example.jpg

@@ -14,5 +14,13 @@ logo.src = webpackLogo
 const heading = document.createElement('h1')
 heading.textContent = example()
 
+// Test a background image url in CSS
+const imageBackground = document.createElement('div')
+imageBackground.classList.add('image')
+
+// Test a public folder asset
+const imagePublic = document.createElement('img')
+imagePublic.src = '/assets/example.png'
+
 const app = document.querySelector('#root')
-app.append(logo, heading)
+app.append(logo, heading, imageBackground, imagePublic)

public/example.png

@@ -3,26 +3,23 @@ html {
   font-family: $font-family;
   background: $background-color;
   color: $font-color;
-  max-width: $page-width;
   line-height: 1.4;
 }
 
 body {
-  margin: 0;
-  width: 100vw;
+  margin: auto;
+  text-align: center;
+  max-width: $page-width;
 }
 
-#root {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  align-self: center;
-  height: 100vh;
+h1 {
+  margin: 0 0 2rem;
 }
 
-h1 {
-  margin: auto;
-  text-align: center;
-  max-width: 90vw;
+.image {
+  display: inline-block;
+  height: 100px;
+  width: 100px;
+  background-image: url('~assets/example.png');
+  background-size: cover;
 }