# \[Solved\] Add background image to list viewer **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** solved\ **Created:** [April 30, 2020, 3:29pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453 "2020-04-30T15:29:59Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![freddiedadog](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@freddiedadog](https://community.thunkable.com/u/freddiedadog)\ **Post date:** [April 30, 2020, 3:29pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/1 "2020-04-30T15:29:59Z")
Hi, I’m trying change the image of my list viewer - to give it some texture rather than just a flat background colour. Currently I don’t see a way to add any background image the same way that an image can be added to a button. So, the idea I have is to put an image in the exact same location as the list viewer and set the list viewer background to transparent so that it appears above the image. But I’m not sure how to do that overlay either… is it possible? ---
**Author:** ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)\ **Post date:** [April 30, 2020, 3:44pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/2 "2020-04-30T15:44:16Z")
Hi @freddiedadog, Are you referring to the new [Extended List View](http://community.thunkable.com/t/would-you-like-to-beta-test-the-new-data-viewer-component/469832) component? ---
**Author:** ![freddiedadog](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@freddiedadog](https://community.thunkable.com/u/freddiedadog)\ **Post date:** [April 30, 2020, 3:49pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/3 "2020-04-30T15:49:52Z")
I’m not really familiar with what that does, but just reading it seems like it’s probably more complicated than what I need. I’m just trying to change the look of the list viewer to make it a non-flat button… ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [April 30, 2020, 3:52pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/4 "2020-04-30T15:52:51Z")
Do you have and mock-ups or references for what this would look like @freddiedadog? Do you want one image behind the entire list viewer, or would each item have an image behind it? ---
**Author:** ![freddiedadog](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@freddiedadog](https://community.thunkable.com/u/freddiedadog)\ **Post date:** [April 30, 2020, 3:59pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/5 "2020-04-30T15:59:42Z")
I do, but I’m having problems uploading the image (access denied). Just one image behind the entire list viewer. Looks something like an iOS scroll wheel with a bit of 3d feel to it. ---
**Author:** ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)\ **Post date:** [April 30, 2020, 4:22pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/6 "2020-04-30T16:22:57Z")
@freddiedadog as a temporary solution use [snipboard.io](http://snipboard.io) to upload screenshots 🙂 Using standard [ListView](https://docs.thunkable.com/list-viewer): ### Add a **Column** to your screen, followed by the **List Viewer** component which should be child of the Column. Should look something like this: [![](https://snipboard.io/bdkPto.jpg) ](https://snipboard.io/bdkPto.jpg) ### I then went and changed the background of the Column to a picture of a cat: [![](https://snipboard.io/baO3Nq.jpg) ](https://snipboard.io/baO3Nq.jpg) ### Result: [![](https://snipboard.io/3bDozv.jpg) ](https://snipboard.io/3bDozv.jpg) Hopefully this is what you meant? If not be sure to let us know. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 30, 2020, 4:32pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/7 "2020-04-30T16:32:52Z")
check this one out! [https://x.thunkable.com/copy/e97515d33916693d25cac0dd71cdf634](https://x.thunkable.com/copy/e97515d33916693d25cac0dd71cdf634) ---
**Author:** ![freddiedadog](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@freddiedadog](https://community.thunkable.com/u/freddiedadog)\ **Post date:** [April 30, 2020, 5:04pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/8 "2020-04-30T17:04:43Z")
@eoinparkinson - Yes, that is what I want. Except I’m looking to only do a small button, not the whole column, so I tried to insert a row under the column and then load the background picture onto that row (and the list viewer is a child of that row too). Challenge is that the image and the list viewer aren’t aligned, there’s still a vertical separation. @jared - Yes too! But I don’t know how you did that. Something to do with absolute and zindex? If I set it to an absolute position, does that mean it won’t adjust dynamically if the screen changes? Eg. If switching from iphone to ipad, would it work for one and not the other. For reference, this is the code I’m using: [https://x.thunkable.com/projects/5ea1a6984e9cae3295ee198b/0736de48-943e-4be4-bf40-6346716c2636/designer](https://x.thunkable.com/projects/5ea1a6984e9cae3295ee198b/0736de48-943e-4be4-bf40-6346716c2636/designer) ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 30, 2020, 5:10pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/9 "2020-04-30T17:10:07Z")
absolute positioning when using % works fine. if you set px, that will not translate well between devices. I think there may be videos about that on youTube ---
**Author:** ![freddiedadog](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@freddiedadog](https://community.thunkable.com/u/freddiedadog)\ **Post date:** [April 30, 2020, 5:16pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/10 "2020-04-30T17:16:07Z")
Thanks! I just checked out youtube, but can’t find a tutorial to help me understand how absolute positioning and z-index works. Is there some documentation somewhere that I could refer to? ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 30, 2020, 5:18pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/11 "2020-04-30T17:18:09Z")
You can start here. > **[Справочник по объектам](http://droidscript.ru/main/statyi/thunkableios_objects.php)** > > Справочник по объектам (@actech’s website) i will post more later basically: z-index = front to back placement of components. (more to come) ---
**Author:** ![freddiedadog](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@freddiedadog](https://community.thunkable.com/u/freddiedadog)\ **Post date:** [April 30, 2020, 5:41pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/12 "2020-04-30T17:41:29Z")
I see. Ok I’m playing around with it now. It’s helping. But I still can’t get the list viewer and the image to align vertically. And also when I put two of these list viewers together on adjacent rows, the images end up overlapping. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 30, 2020, 5:57pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/13 "2020-04-30T17:57:37Z")
> [@freddiedadog](#): > > But I still can’t get the list viewer and the image to align do they align in the shared project? ---
**Author:** ![freddiedadog](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@freddiedadog](https://community.thunkable.com/u/freddiedadog)\ **Post date:** [April 30, 2020, 5:59pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/14 "2020-04-30T17:59:56Z")
In the one you shared? Yes, they do. In that one both the list viewer and the image fill up the container. That’s what I’m trying to achieve too, except with a smaller container, constrained by a column and a row under it. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 30, 2020, 6:57pm UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/15 "2020-04-30T18:57:50Z")
> [@freddiedadog](#): > > do. In that one both the list viewer and the image fill up the container. That’s what I’m trying to achieve too, except with a smaller container, constrained by a column and a row under it. check out how i made it here https://www.loom.com/embed/378f8927d620419f8bf8adb48fa6b4b2 ---
**Author:** ![freddiedadog](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@freddiedadog](https://community.thunkable.com/u/freddiedadog)\ **Post date:** [May 1, 2020, 12:56am UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/16 "2020-05-01T00:56:36Z")
Thanks!! I’m going to need some time to work through this and I’ll let you know how it goes! ---
**Author:** ![freddiedadog](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@freddiedadog](https://community.thunkable.com/u/freddiedadog)\ **Post date:** [May 1, 2020, 5:08am UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/17 "2020-05-01T05:08:59Z")
It worked! Thanks!! In the end I ended up setting height and width to relative and 100% rather than fill container, and that managed to ensure the image and listviewer filled up the column (row) without misalignment. ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [May 1, 2020, 7:56am UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/18 "2020-05-01T07:56:04Z")
Thanks for following up @freddiedadog I’m going to mark this as #solved so if Jared’s answer was the solution for you. Please feel free to #ShareYourApps with us, both here and [on Twitter](https://twitter.com/hashtag/madewiththunkable?f=live), when you get it finished. ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 11:29am UTC](https://community.thunkable.com/t/solved-add-background-image-to-list-viewer/564453/19 "2024-11-08T11:29:32Z")