CODEWITHSUNDEEP
csselementor
Afi
Afi

Reputation: 13

Background-image not fully responsive on mobile devices

Good afternoon, I'm new to webdesign. I've added a background-image to my webpage. I used the below CSS to achieve this:

body {
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    height: 100%;
    background-image: url(link.jpg);
   }

It is fine on desktop and tablet devices. However on mobile phones, not everything is showing. I have a specific image for mobile devices, but I don't want to use it, because there is too much quality loss of pixels. I want to use the same image, but it is not scaling down correctly.

I already tried adding a media query for mobile, with adding background-size: contain. Then the image is scaling down in the widht, but not the whole background is coverd. So that doesn't help either.

What can I do to fix this?

Thank you.

Upvotes: 0

Views: 924

Answers (2)

Tretanz Infotech
Tretanz Infotech

Reputation: 20

if you are ok with stretching image then you can use,

background-size: 100% 100%;

Upvotes: 0

Adriatic
Adriatic

Reputation: 1287

That's normal behaviour when using a landscape image on a portrait screen. The only thing you can do is, what you already tried. Add some media-queries for different screen resolutions, which adjust you image the way you thing it looks the best.

One idea for your case: If you add a header and a footer to your website, it should be possible to show the background image exactly like you wish.

Upvotes: 1

Related Questions