# Background photos taking viewport

**URL:** <https://forum.adalo.com/t/background-photos-taking-viewport/3842>\
**Category:** Get Help\
**Created:** [September 7, 2020, 9:04am UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842 "2020-09-07T09:04:00Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![sebastas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/sebastas/32/3447_2.png) [@sebastas](https://forum.adalo.com/u/sebastas)\
**Post date:** [September 7, 2020, 9:04am UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/1 "2020-09-07T09:04:00Z")

</div>

Hi,  
What is the best way to have a photo occupy all the viewport for background purposes? If I am developing the background as a photo, when I change the phone layout, the image is then misplaced, not occupying the full screen. Thanks

---

<div class="post-metadata">

**Author:** ![anon78309838](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@anon78309838](https://forum.adalo.com/u/anon78309838)\
**Post date:** [September 7, 2020, 3:11pm UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/2 "2020-09-07T15:11:56Z")

</div>

You have to set the background image within the screen properties.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/1/1c6dbbeb2462535ad0483abe365621312bb8459b.png)

---

<div class="post-metadata">

**Author:** ![sebastas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/sebastas/32/3447_2.png) [@sebastas](https://forum.adalo.com/u/sebastas)\
**Post date:** [September 8, 2020, 9:59am UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/3 "2020-09-08T09:59:43Z")

</div>

Hi Colin,  
I did that, but how to size for different screens (mobiles). It will always have different sizes according to viewport of the mobile. Ideally there should be a fit-to-screen, cover, contain selection for example. Thanks

---

<div class="post-metadata">

**Author:** ![anon78309838](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@anon78309838](https://forum.adalo.com/u/anon78309838)\
**Post date:** [September 9, 2020, 8:56am UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/4 "2020-09-09T08:56:20Z")

</div>

It should fit automatically to the screen already with this option. Can you show a screenshot of it not doing that?

---

<div class="post-metadata">

**Author:** ![sebastas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/sebastas/32/3447_2.png) [@sebastas](https://forum.adalo.com/u/sebastas)\
**Post date:** [September 9, 2020, 1:05pm UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/5 "2020-09-09T13:05:11Z")

</div>

If I am in Development mode it shows like this

 ![adalo development mode](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/0/06c3053954e7bb4498e3a8fe6299c207782e0774.jpeg)

If I check it from mobile it gives this\_

 ![adalo mobile mode](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/7/737974ef9da04906ba5e9caad9b8ebb3ad803d8a.jpeg)

Also, characters are missing in the buttons which are quite odd.

Another thing I just noticed is

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/5/5a066b4bcaaebdb19a1dbff246e932fd9ad0dfc1.jpeg)

the login has no signup process in development mode, but in the MOBILE app it appears in the bottom in the white section, which actually seems tobe the issue.

---

<div class="post-metadata">

**Author:** ![sebastas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/sebastas/32/3447_2.png) [@sebastas](https://forum.adalo.com/u/sebastas)\
**Post date:** [September 14, 2020, 12:24pm UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/6 "2020-09-14T12:24:32Z")

</div>

Hi,  
Did anyone had chance to look into it?

Thank you.Jorge

---

<div class="post-metadata">

**Author:** ![anon78309838](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@anon78309838](https://forum.adalo.com/u/anon78309838)\
**Post date:** [September 14, 2020, 3:55pm UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/7 "2020-09-14T15:55:03Z")

</div>

No, I didn’t get a chance yet but will try tomorrow.

---

<div class="post-metadata">

**Author:** ![sebastas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/sebastas/32/3447_2.png) [@sebastas](https://forum.adalo.com/u/sebastas)\
**Post date:** [September 15, 2020, 8:27am UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/8 "2020-09-15T08:27:44Z")

</div>

Thanks Colin,  
This is affecting all my apps, also in progressive mode.

---

<div class="post-metadata">

**Author:** ![anon78309838](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@anon78309838](https://forum.adalo.com/u/anon78309838)\
**Post date:** [September 15, 2020, 11:07am UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/9 "2020-09-15T11:07:37Z")

</div>

So I fixed the login screen for you as an example. There were 2 issues with it.

1. You had that signup text group hidden under the image (bottom layer), that is why it was not visible.

2. You were using an image component instead of using the screens style background option like I had mentioned in the first post.

I have used a temporary image as the background for the login page, you are able to change this yourself now. Below is a screenshot to remind you where this setting is.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/1/1da14776fbedce0cd3fa370855f0d4d9bbe956f3.jpeg)

---

<div class="post-metadata">

**Author:** ![sebastas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/sebastas/32/3447_2.png) [@sebastas](https://forum.adalo.com/u/sebastas)\
**Post date:** [September 15, 2020, 11:11am UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/10 "2020-09-15T11:11:42Z")

</div>

Hi Colin,  
“I was once blind, but now I see” :D. My apologies, my brain kept insisting to make style changes in the photo itself. i will take a look. Thanks.

One last thing, I don’t know if you check but characters are missing when checking the apps via the ADALO app.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/5/541965f21e978d752b7a424190e7ea87002d5416.jpeg)

Thank you very much.

---

<div class="post-metadata">

**Author:** ![anon78309838](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@anon78309838](https://forum.adalo.com/u/anon78309838)\
**Post date:** [September 15, 2020, 12:14pm UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/11 "2020-09-15T12:14:06Z")

</div>

I don’t have that problem at all actually. Have you tried doing a hard refresh of the page to remove the cache?

---

<div class="post-metadata">

**Author:** ![sebastas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/sebastas/32/3447_2.png) [@sebastas](https://forum.adalo.com/u/sebastas)\
**Post date:** [September 15, 2020, 5:08pm UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/12 "2020-09-15T17:08:09Z")

</div>

This happens only using the Adalo App from Google Store to view the apps.

---

<div class="post-metadata">

**Author:** ![anon78309838](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@anon78309838](https://forum.adalo.com/u/anon78309838)\
**Post date:** [September 16, 2020, 7:29am UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/13 "2020-09-16T07:29:59Z")

</div>

What device are you using?

---

<div class="post-metadata">

**Author:** ![sebastas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/sebastas/32/3447_2.png) [@sebastas](https://forum.adalo.com/u/sebastas)\
**Post date:** [September 16, 2020, 8:10am UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/14 "2020-09-16T08:10:44Z")

</div>

Hi, a regular Android phone - OnePlus 6

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/system/32/40401_2.png) [@system](https://forum.adalo.com/u/system)\
**Post date:** [September 26, 2020, 8:10am UTC](https://forum.adalo.com/t/background-photos-taking-viewport/3842/15 "2020-09-26T08:10:57Z")

</div>

Closed on September 26, 2020, 8:10am UTC

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
