diff --git a/src/attributes/Alignment.php b/src/attributes/Alignment.php
index ee051da..c1aa6f0 100644
--- a/src/attributes/Alignment.php
+++ b/src/attributes/Alignment.php
@@ -2,6 +2,7 @@
 
 namespace markhuot\keystone\attributes;
 
+use craft\web\View;
 use Illuminate\Support\Collection;
 use markhuot\keystone\base\Attribute;
 
@@ -17,7 +18,7 @@ public function getInputHtml(): string
         return \Craft::$app->getView()->renderTemplate('keystone/attributes/alignment', [
             'name' => get_class($this),
             'value' => $this->value,
-        ]);
+        ], View::TEMPLATE_MODE_CP);
     }
 
     public function getCssRules(): Collection
diff --git a/src/attributes/Background.php b/src/attributes/Background.php
index e3d35b5..d3ac9ae 100644
--- a/src/attributes/Background.php
+++ b/src/attributes/Background.php
@@ -4,6 +4,7 @@
 
 use Craft;
 use craft\elements\Asset;
+use craft\web\View;
 use Illuminate\Support\Collection;
 use markhuot\keystone\base\Attribute;
 
@@ -20,7 +21,7 @@ public function getInputHtml(): string
             'label' => 'Background',
             'name' => get_class($this),
             'value' => $this->value ?? null,
-        ]);
+        ], View::TEMPLATE_MODE_CP);
     }
 
     public function getCssRules(): Collection
diff --git a/tests/AttributesTest.php b/tests/AttributesTest.php
index cf8517d..fb04e0b 100644
--- a/tests/AttributesTest.php
+++ b/tests/AttributesTest.php
@@ -28,3 +28,16 @@
 
     expect($component->getAttributeBag()->toArray())->class->toBe('');
 });
+
+it('renders attributes', function ($attrName, $props, $rules=null) {
+    $attr = new $attrName($props);
+    $output = $attr->getInputHtml();
+    expect($output)->toContainEach(array_keys($props));
+    $computedRules = $attr->getCssRules();
+    expect($computedRules->toArray())->toEqualCanonicalizing($rules ?? $props);
+})->with([
+    [\markhuot\keystone\attributes\Alignment::class, ['justify-content' => 'center', 'align-items' => 'center']],
+    [\markhuot\keystone\attributes\Background::class, ['color' => '000'], ['color' => '#000']],
+    [\markhuot\keystone\attributes\Background::class, ['repeat' => false], ['background-repeat' => 'no-repeat']],
+    [\markhuot\keystone\attributes\Background::class, ['size' => 'contain'], ['background-size' => 'contain']],
+]);
diff --git a/tests/Pest.php b/tests/Pest.php
index 8d0274c..afca7f3 100644
--- a/tests/Pest.php
+++ b/tests/Pest.php
@@ -38,8 +38,10 @@
 |
 */
 
-expect()->extend('toBeOne', function () {
-    return $this->toBe(1);
+expect()->extend('toContainEach', function (iterable $items) {
+    foreach ($items as $item) {
+        $this->toContain($item);
+    }
 });
 
 /*