# FKB Pro - Social theme

**URL:** <https://meta.discourse.org/t/fkb-pro-social-theme/234323>\
**Category:** Theme\
**Created:** [July 28, 2022, 8:58pm UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323 "2022-07-28T20:58:41Z")\
**Posts on this page:** 1\
**Showing post:** 180

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [August 12, 2023, 8:37am UTC](https://meta.discourse.org/t/fkb-pro-social-theme/234323/180 "2023-08-12T08:37:33Z")

</div>

Hello 👋

Thanks for bringing this up! I’ve made an update on topic image (thumbnail) section. 🙂

[https://github.com/VaperinaDEV/fkb-pro-theme/pull/22](https://github.com/VaperinaDEV/fkb-pro-theme/pull/22)

With this update I replace `background` with `<img>` and optionally a backdrop image can be added to this. The backdrop can handle the small image _(which not cover this section)_ empty area. It works like a _hacky_ dominant color background with the default settings.

I have added some new settings. With this setting you can choose the:

 ![Screenshot 2023-08-12 at 10.12.16](https://global.discourse-cdn.com/meta/original/4X/6/f/0/6f00e1115e78b216455909d86835ce7061d9559d.png)

1. Topic image section height (default: 300px)

2. Image fit

- cover (default)
- contain
- scale-down
- none

1. Backdrop image (default: disable)

2. Backdrop image blur

3. Backdrop image brightness

* * *

This is how it looks:

**Default (image fit cover, no backdrop)**

 ![Screenshot 2023-08-12 at 10.14.33](https://global.discourse-cdn.com/meta/original/4X/e/1/4/e145ea4149ea21426ee6e2ed93192c836119deef.jpeg)

**Image fit contain**

 ![Screenshot 2023-08-12 at 10.15.25](https://global.discourse-cdn.com/meta/original/4X/6/f/c/6fcecefb0a941b0700f8b038de63b2c758e2b08e.png)

**Image fit contain with backdrop**

 ![Screenshot 2023-08-12 at 10.16.24](https://global.discourse-cdn.com/meta/original/4X/5/d/e/5de754a61af4cd9074cbcba400b1c523183fdd7d.png)

**Difference between image fit (cover, contain, scale-down and none)**

small image

 ![Screenshot 2023-08-12 at 10.21.23](https://global.discourse-cdn.com/meta/original/4X/8/f/4/8f4cec96c9d57b4d908c223102badde5f2f8c08e.png)  
 ![Screenshot 2023-08-12 at 10.17.58](https://global.discourse-cdn.com/meta/original/4X/1/2/9/1295c96ba77edd543462247bd707562b99a6fc5d.png)  
 ![Screenshot 2023-08-12 at 10.20.16](https://global.discourse-cdn.com/meta/original/4X/d/e/6/de6f98ea69dfb5680b8362b64807c4ed0f11e0b7.png)  
 ![Screenshot 2023-08-12 at 12.04.39](https://global.discourse-cdn.com/meta/original/4X/7/e/e/7eefd58fc71646cd481ae6a902413da83ce42adc.png)

larger image

 ![Screenshot 2023-08-12 at 10.14.33](https://global.discourse-cdn.com/meta/original/4X/e/1/4/e145ea4149ea21426ee6e2ed93192c836119deef.jpeg)  
 ![Screenshot 2023-08-12 at 10.16.24](https://global.discourse-cdn.com/meta/original/4X/5/d/e/5de754a61af4cd9074cbcba400b1c523183fdd7d.png)  
 ![Screenshot 2023-08-12 at 10.16.24](https://global.discourse-cdn.com/meta/original/4X/5/d/e/5de754a61af4cd9074cbcba400b1c523183fdd7d.png)  
 ![Screenshot 2023-08-12 at 12.05.55](https://global.discourse-cdn.com/meta/original/4X/2/f/c/2fcb10ec8ca3cebd77b7eeb39fb3199e5d51a6e2.jpeg)

* * *

**Difference between blur and brightness values**  
blur  
50px, 25px, 10px

 ![Screenshot 2023-08-12 at 10.16.24](https://global.discourse-cdn.com/meta/original/4X/5/d/e/5de754a61af4cd9074cbcba400b1c523183fdd7d.png)  
 ![Screenshot 2023-08-12 at 10.24.35](https://global.discourse-cdn.com/meta/original/4X/0/1/7/0175ebdc28aaf222202a7f1fc697feaf3cb2b15f.png)  
 ![Screenshot 2023-08-12 at 10.25.28](https://global.discourse-cdn.com/meta/original/4X/7/9/5/7955f9c371d7d09bc5c5b89fefecb599ebf5ee7f.png)

brightness  
0.65, 0.55, 0.45

 ![Screenshot 2023-08-12 at 10.16.24](https://global.discourse-cdn.com/meta/original/4X/5/d/e/5de754a61af4cd9074cbcba400b1c523183fdd7d.png)  
 ![Screenshot 2023-08-12 at 10.27.40](https://global.discourse-cdn.com/meta/original/4X/5/1/c/51c347c2ae2fe35b38e1e77df979b31224b3f018.png)  
 ![Screenshot 2023-08-12 at 10.28.17](https://global.discourse-cdn.com/meta/original/4X/2/6/f/26f62b80e76081b9bc269a009f5f9422bc928e8a.png)

* * *

Edit: Forget to add the image fit `none` option.  
[https://github.com/VaperinaDEV/fkb-pro-theme/pull/23](https://github.com/VaperinaDEV/fkb-pro-theme/pull/23)

---

_[View the full topic](https://meta.discourse.org/t/fkb-pro-social-theme/234323)._