/    Sign up×
Community /Pin to ProfileBookmark

Background image problem occurs on Android 9+

Copy linkTweet thisAlerts:
Jun 12.2021

I asked two of my friends who are Android 9 users to test my new created website.

When they tested it on Chrome & Firefox browsers they both saw my background image repeats all over which is unexpected (ss included):
![](https://www.linkpicture.com/q/285E81AE-ECBE-44C6-94AC-64D42C0540B6.jpeg)

On the other hand, I tested it on Chrome browser of another device with Android 8.0.0 OS and it looked as expected:
![](https://www.linkpicture.com/q/4B070E2F-2E56-4328-9BAD-4A35BEAF3DFE.jpeg)

How can I avoid the problem?
Thank you.

to post a comment

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJun 12.2021 — Please post the URL of your site so that we are able to look into.
Copy linkTweet thisAlerts:
@rumeysaglgauthorJun 12.2021 — @Sempervivum#1632876 You can find it here: http://143.198.136.50/
Copy linkTweet thisAlerts:
@SempervivumJun 12.2021 — The same issue on my mobile (Android 11 and Samsung Browser). I was able to fix it by explicitly specifying `no-repeat</C> for the background and applying it to body instead of HTML:
<CODE>`<i>
</i>body {
background-image: url("../jpegs/5-edited.jpg");
background-color: #cccccc;
background-size: cover;
background-repeat: no-repeat;
}<i>
</i>``

BTW: Your background image is huge, more than 4MB and takes a lot of time to load. Consider to reduce it's size.
Copy linkTweet thisAlerts:
@rumeysaglgauthorJun 12.2021 — @Sempervivum#1632878 Thank you. I'll try that.

What is the appropriate size of an image? Is around 1-2 MB fine?
Copy linkTweet thisAlerts:
@SempervivumJun 12.2021 — 1-2 MB is better but still fairly large. This is a general problem when using a background image filling the complete viewport without repeating: On one hand it has to be large in order to achieve a sufficient quality even on high res screens and on the other hand there is the aspect of loading time.
Copy linkTweet thisAlerts:
@SempervivumJun 12.2021 — PS: An improvement might be possible by providing two images, one for portrait and one for landscape. Switching can be done by a media query.
Copy linkTweet thisAlerts:
@johncarryJun 14.2021 — Change the resolution of Image. and try
×

Success!

Help @rumeysaglg spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...