There are several different monitor types, therefore a webpage need to be compatible with a lot of different screen resolutions. We use 4K monitors nowadays but most of the background images are still "only" HD. But this is not the only problem I am facing. The most important is, how do you know what the resolution of the currently used monitor is, using HTML or CSS? If I set a HD background for my page and someone uses a 4K monitor to open my site, he/she will see my background's bottom and therefore an empty part of the webpage under the background image, which is not very nice. What are the possible solutions for this problem?
I think what you're looking for is achievable through css, via media queries. This basically allows you to style your html for different screen resolutions. the syntax is fairly easy to understand too.
One of the ways is to use these media queries within your css file. here's an example below.
/*This is for all screen types as you would guess*/
body{
background-image: url('img/large-background.jgp');
/*This will target screens with max width of 768px i.e. tablets*/
@media (max-width: 768px) {
body {
background: url('img/less-large-background-for-devices.jpg');
}
}
Also look at these docs, they are very comprehensive and easy to understand. They will give you more details about this and other ways of targeting different screens using css.