# CSS for changing background color surrounding avatar

**URL:** <https://meta.discourse.org/t/css-for-changing-background-color-surrounding-avatar/83440>\
**Category:** UX\
**Created:** [20 maart 2018 om 22:38 UTC](https://meta.discourse.org/t/css-for-changing-background-color-surrounding-avatar/83440 "2018-03-20T22:38:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ellibereth](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ellibereth/32/202896_2.png) [@Ellibereth](https://meta.discourse.org/u/Ellibereth)\
**Post date:** [20 maart 2018 om 22:38 UTC](https://meta.discourse.org/t/css-for-changing-background-color-surrounding-avatar/83440/1 "2018-03-20T22:38:25Z")

</div>

Whats the css class to use to change the background color for the section under/around the user avatar (red section below).

 ![](https://global.discourse-cdn.com/meta/original/3X/3/0/3096fd23cde3344b4b63add10bedbe59e15c80af.png)

The stuff I tried all either colored only the brown section as in the image above, or colored the section marked but also colored some additional space to the right that’s white in the screenshot above.

Thanks.

---

<div class="post-metadata">

**Author:** ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)\
**Post date:** [21 maart 2018 om 00:15 UTC](https://meta.discourse.org/t/css-for-changing-background-color-surrounding-avatar/83440/2 "2018-03-21T00:15:38Z")

</div>

Using background linear-gradient on row and background white on topic-body may do what you want. eg. a quick mock (disregard the red outlines)

 ![left-color](https://global.discourse-cdn.com/meta/original/3X/8/a/8a36e24582f34ae36c7745ba75f337ec1571764f.png)

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [21 maart 2018 om 04:31 UTC](https://meta.discourse.org/t/css-for-changing-background-color-surrounding-avatar/83440/3 "2018-03-21T04:31:21Z")

</div>

The class that wraps the avatar here is `.topic-avatar`, but by default it’s only as tall as the avatar. Here’s a red background to illustrate:

 ![50%20AM](https://global.discourse-cdn.com/meta/original/3X/a/6/a65215081d6e197b6af3beab8974fc03ac1c8f09.png)

@Mittineague’s workaround posted above is simple and clever, and doesn’t require changing the existing layout. You’d do something like this:

```SCSS
.boxed .row {
    background: linear-gradient(to right, rgba(255,0,0,1) 0%,rgba(255,255,255,0) 40%);
}

.topic-body {
    background: red;
}

```

Alternatively, you could try making `.topic-avatar` stretch the full height of the post by adding

```SCSS
.boxed .row {
    display: flex
}

.topic-avatar {
    background: red;
}

```

I haven’t tested this alternative thoroughly, and it will possibly cause some alignment issues with posts… so if you go this route make sure to keep an eye out. The result that would produce looks like this:

 ![46%20AM](https://global.discourse-cdn.com/meta/original/3X/2/7/27d8709fdf072c3eec49acd35a551bd7c29dcb4c.png)