The background image for my website gets out of proportion when viewed in phones and other small screen sizes

Question

I'm having issues with re-sizing my background image in CSS to fit other smaller screens than the intended screen size of my laptop

I have already tried 'background-size: contain' and 'background-repeat : no-repeat'. still, the background image blew out of proportion. I have a set of parameters for the image, which is 'height: 100vh;'

/* with this, only a fraction of image is seen in phone */

header {
    background - image: -webkit - linear - gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img / hero.jpg);
    background - image: linear - gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img / hero.jpg);
    background - size: cover;
    height: 100 vh;
    background - position: center;
    background - repeat: no - repeat;
    background - attachment: fixed;
}

/* with this a grey background appears in phone screens */
header {
    background - image: -webkit - linear - gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img / hero.jpg);
    background - image: linear - gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img / hero.jpg);
    background - size: contain;
    height: 100 vh;

    background - position: center;
    background - repeat: no - repeat;
    background - attachment: fixed;
}

I expect the image to fit all screen sizes without zooming in and blurring, but the results always blew out of proportion.

score 0 · Answer 1 · answered May 26 '19 at 06:56

0

You must use media queries for make it responsive for mobile and other devices.I can not understand your code because you not give any html file in which you apply css properties but i suggest use media queries it help you for making you page responsive for every devices. e.g:

@media_queries{
max-width:100%;
min-width:100%
}

answered May 26 '19 at 06:56

ATIQ UR REHMAN

431
3
12

I have written media queries but I haven't added max-width. I'll add it and see if it works. – Aravind Roshan May 28 '19 at 11:44

score 0 · Answer 2 · answered May 26 '19 at 07:39

0

Same problem was with my code ,i just add one line:

.your-class {
height: 100vh;
    }

vh is viewport height. This will automatically scale to fit the device' browser window.

Check more here: How to make a div 100% height of the browser window?

answered May 26 '19 at 07:39

Muhammad Zeeshan

89
5

But I have already added height : 100vh; It still doesnt scale according the screen size – Aravind Roshan May 28 '19 at 11:45

score 0 · Answer 3 · answered May 26 '19 at 07:56

0

Assuming that

background-size:cover;

is working I would suggest that you create two versions of your background image- a landscape one for pc's and laptops that resizes with the screen (proportion of screens tend to remain similar) and a portrait one for mobile phones. Your image might get cut off at the corners because of varying phone screen proportions.

answered May 26 '19 at 07:56

Muaaz

21
7

I have already created a seperate media queries css, but for hones less than 680 pxs. Yet, it doesn't seems to have any effect on my background image. – Aravind Roshan May 28 '19 at 11:43

The background image for my website gets out of proportion when viewed in phones and other small screen sizes

3 Answers3