# Title with background image

**URL:** <https://community.glideapps.com/t/title-with-background-image/32984>\
**Category:** Ask for Help\
**Created:** [October 12, 2021, 5:39pm UTC](https://community.glideapps.com/t/title-with-background-image/32984 "2021-10-12T17:39:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [October 12, 2021, 5:39pm UTC](https://community.glideapps.com/t/title-with-background-image/32984/1 "2021-10-12T17:39:00Z")

</div>

I want to make the title have a bluish shape in the background since I want to use it to bring the user data and improve the visibility of the app. Is it possible to do this?

 ![123](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/1/b1d4a02fef042afe59f055c8be6418af8160bbe5.png)

---

<div class="post-metadata">

**Author:** ![eltintero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eltintero/32/76520_2.png) [@eltintero](https://community.glideapps.com/u/eltintero)\
**Post date:** [October 12, 2021, 6:29pm UTC](https://community.glideapps.com/t/title-with-background-image/32984/2 "2021-10-12T18:29:24Z")

</div>

[CSS Title Bar with clickable images (Logo + Profile) & texts?](https://community.glideapps.com/t/css-title-bar-with-clickable-images-logo-profile-texts/32334)

Or this:

> [@The CSS I am using these days](https://community.glideapps.com/t/the-css-i-am-using-these-days/26516):
>
> I have a Notepad doc open with the CSS I use in the app (and some I am thinking of using but have not deployed yet). And big thanks to the community for these! I have not worked out any of them myself slight_smile I am copying these across a bit quickly so I hope I have not got anything wrong! CSS Used in Covessa Adjust Title - narrow Image \<pre\>\<span\>\<style\> [data-test="app-summary"] \>\* { margin-top: -150px; { Remove Top and Tab \<pre\>\<span\>\<style\> [id="tabBar"]{ display: none; } …

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [October 12, 2021, 7:27pm UTC](https://community.glideapps.com/t/title-with-background-image/32984/3 "2021-10-12T19:27:40Z")

</div>

In fact, I’ll use all of that later. But for now I need to put the “title” above an image.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 14, 2021, 12:06am UTC](https://community.glideapps.com/t/title-with-background-image/32984/4 "2021-10-14T00:06:10Z")

</div>

So your name would be on top of the image, then with a background as well?

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [October 14, 2021, 1:40pm UTC](https://community.glideapps.com/t/title-with-background-image/32984/5 "2021-10-14T13:40:11Z")

</div>

Exactly what I need. Correct

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 14, 2021, 11:30pm UTC](https://community.glideapps.com/t/title-with-background-image/32984/6 "2021-10-14T23:30:12Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/8/78ea4e2c24135cdbffb5606730ed37160d04b111.jpeg)

Got it.

```auto
<pre><span><style>

[data-test="app-summary"] >div {
display:flex;
flex-direction: column-reverse;
background: #5ac9f8;
border-radius: 15px;
}

[data-test="app-summary"] :nth-child(2) >div {
color: white;
font-weight: 550;
margin-top: 10px;
}

```

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [October 14, 2021, 11:52pm UTC](https://community.glideapps.com/t/title-with-background-image/32984/7 "2021-10-14T23:52:23Z")

</div>

Man, you make my days happy hahaha. Thank you very much, genius!

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [October 15, 2021, 1:00am UTC](https://community.glideapps.com/t/title-with-background-image/32984/8 "2021-10-15T01:00:07Z")

</div>

Good job @ThinhDinh!!!

---

<div class="post-metadata">

**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\
**Post date:** [October 15, 2021, 1:36am UTC](https://community.glideapps.com/t/title-with-background-image/32984/9 "2021-10-15T01:36:32Z")

</div>

This is where some of the new Pages stuff can collide and take over the Apps components. The Pages Title component is a thing of beauty! Background image with ability to lighten/darken/blur. It’s great!

---

<div class="post-metadata">

**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\
**Post date:** [January 17, 2024, 4:50pm UTC](https://community.glideapps.com/t/title-with-background-image/32984/10 "2024-01-17T16:50:02Z")

</div>