I want to make a HD picture as my responsive background - html

Question

so I want to make an image(2988 x 2988) as my background I tried this code as my css
body {
background-image: url(images/nicholas-kwok-225380-unsplash.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}
and please look at the picture to understand what I am talking about guys
Thank you !

Answer 1

body {
background-image: url('images/nicholas-kwok-225380-unsplash.jpg');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
margin:0; /* 1 */
width:100%; /* 2 */
min-height:100vh; /* 3 */
height:auto; /* 4 */
}
1: As described in comments the Body HTML element often has a default margin value (0.5rem) which means it can't naturally cover the screen size entirely.
2: Set the image to scale to the size of the body.
3: Set the body to be a minimum height of the entire screen viewport height. So if the body contents is less than the screen size you still see the full body background image.
4: A fix for some browsers (IE / Edge) that will not accept min-height values being set without a height value also being set.
As a significant but side issue: your image size (2988px x 2988px) is HUGE and deeply impractical for 95% of your website viewers. You should either consider reducing your image size to something more usual (~1800px) and/or using some sort of image optimisation tool to radically reduce the filesize.
Image files will need to be downloaded by the client so a ~400Kb image (for example) loading on a ~12Kb webpage will be a big burden for your server to serve and will be slow for the client browser to get and load into memory.
I would recommend reducing the image pixel dimensions and running it through an optimiser tool .
OR
You should use media queries in the CSS so that you only need to load the largest image for the current client screen width. A user on a 480px screen has no need for a 2988px width image.
IF you load a very large image into a small screen space, the browser will firstly download the whole image (wasting above 90% of the data) and will then badly/quickly rescale the image to fit the screen -- making it look worse than it actually is by using a fast but imprecise scaling algorithm.
Update:
To show the full picture in the background regardless of screen size, you want to change cover to contain thus:
background-size: contain;

Answer 2

Do you want to keep the aspect ratio or you just want it to fill the whole space?
#shomz , I want it to fill the whole space (screen) !
Based on the comment above, a simple:
background-size: 100% 100%;
should do. This will always stretch the image to fill your screen.
See here:
body {
background-image: url(https://www.picpng.com/images/large/hat-male-man-person-silhouette-transparent-95008);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
background-color:#464646;
}