So I'm trying to make the image fits on my screen on all zooms e.g., like when u use google chrome zoom, so when zoom is at 80% The image fits well like the following image

but once I put my zoom at 100% this, there's a part that isn't covered by the image

My html code is the following

<article></article>

and css is the following:

article{
    display: flex;   
    width: 100%;
    height: 100vh;
    background-image: url("/Assets/Choose-role-image.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

What should I do to make the image fits on all zooms,should I change the height or remove it or what do you suggest as a solution

I have added some borders so you see what Im talking about enter image description here Thanks in advance

So I'm trying to make the image fits on my screen on all zooms e.g., like when u use google chrome zoom, so when zoom is at 80% The image fits well like the following image

but once I put my zoom at 100% this, there's a part that isn't covered by the image

My html code is the following

<article></article>

and css is the following:

article{
    display: flex;   
    width: 100%;
    height: 100vh;
    background-image: url("/Assets/Choose-role-image.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

What should I do to make the image fits on all zooms,should I change the height or remove it or what do you suggest as a solution

I have added some borders so you see what Im talking about enter image description here Thanks in advance

• html
• css
• image-scaling

• Can you create a snippet inside your question and upload the image to a publicly available source so we could play around the problem in order to help you? – Lajos Arpad Commented Feb 17 at 15:45
• You can never guarantee to get all of an image into a space with no gaps of course as aspect-ratios may differ. What you can do is look into sizing values such as cover and contain and decide what is best for your application. – A Haworth Commented Feb 17 at 16:12
• @LajosArpad I will try to do that right now – Omar Commented Feb 17 at 16:44
• @LajosArpad stackblitz/edit/… PLEASE CHECK THIS OUT ALSO IS THERE ANYWAY i CAN CONTACT WITH YOU ? – Omar Commented Feb 17 at 17:02
• @AHaworth so there's no solution ?? also how big companies manage to do such thing and they got good image for each screen size even if you zoom in/out it still appears perfect – Omar Commented Feb 17 at 17:04

1 Answer 1

Try using the background-size property with the value 'cover'. The code should look like this:

article {
    display: flex;   
    width: 100%;
    min-height: 100vh;
    background-image: url("/Assets/Choose-role-image.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}