css background image resize width crop height

Instead of

background-size: cover;

you will want to use

background-size: 100% auto;

Cover will stretch the image to the smallest size such that both its width and its height can fit inside the content area, hence your issue. See more about that over here.

Image aspect ratio is not changed when you use cover. However, I believe what you want is to fix bottom of the image, since you told that you want it to be cropped from top, not center, which I thought you wanted to say not from top and bottom.

If you want to keep the bottom at the bottom, (maybe a grassland with an avoidably large sky?) then you will need to change positioning to center bottom from center center.

If you make it 100% auto as Nit suggested, then, on a window where height/width ratio of the html element is larger than your image's, you will see empty space at the top which can be what you wanted especially in case you are using an image that fades into the same color at top...

For your second problem, it is not fqdn, it is the relative/absolute referencing of your path. According to your css, there should be an image folder where your css file is which has a bg.jpg in it.

index.html
main.css
images/
    bg.jpg