How to make my long height image scroll bar visible and the image itsel visible

Question

I have little website I'm trying to plan on building. But when I started making the background image for it, the image is made so my website is kind of scrolling web page up and down so I made it long. But now the image only shows small part of it, I trying changing resolution of my browser and I could see it but without that I cannot scroll to see the whole image.

The problem which shows that the photo is not fully shown, photo is 2160*3840 px means it is opposite of normal resolution:

Answer 1

If you're using CSS and adding this as a background image to the page body , then it should be an easy problem to solve (and in fact you get quite a few options).

Firstly, lets assume this is your current code:

body {
    background-image:url("yourimage.png"); /* The filetype does not matter */
}

Now, as far as CSS sees it, some people viewing your site could be on phones, some on 13" laptops, or some could be viewing it on 5k desktops - if we want the image to work on all at all of these different sizes, then clearly the image is going to have to be modified in some way.

By adding the background-size property here, we can adjust how this happens:

• background-size:cover; seems like the best choice for you. It will slightly crop / stretch the image to fit it (but remember, this is probably going to be beneficial).

• background-size:100% 100%; will always display 100% of the image - but this will usually result in it being stretched, etc.

There are quite a few other values this property can be set to - you can take a look at them here , or read the spec on it over at MDN .