Question posted in 
I’m trying to add a background to an element, however the image is very large. As a result, using background: cover leaves the image actual-size and does not center it. Thus, the image appears very “zoomed in” as it is not showing as much as it can.
So, here’s the question: How can I have the image be as small as it can, while still covering the entire element. Furthermore, how can I center it properly?
Attached I have what background: cover gives me, and a simple photoshop mockup of what I want. I outlined in red where the border of the background is.
Background: Cover with small width
Photoshop mockup with small width
Background: Cover with large width
Photoshop mockup with large width
2
Answers
Currently your background-position declaration for #home is set to 0, 0;
Those numbers represent the x-axis (horizontal placement) and y-axis (vertical placement) for the background image. I played around with the inspector and was able to move the background image’s position more to my liking. You could also try playing around with keywords if they make more sense to you
or perhaps:
Percentages are also an option:
The keywords and percentages also apply to the x-axis and y-axis respectively.
Check out the MDN article for more information:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
One final note, your background image is huge–7.1MB to be exact. If you could get it the size down to at least 1MB (though under 500kb would be ideal), I’d totally recommend that.
I am not sure if this could help since I have not tried it; however, basically there is a property called
background-size: and the size can be in %
so if you want the background image to be 50% ( width and height ) or 50% 75% ( width and height) of the or certain size you want
see documentation background-size also see examples
Hope this could help
Alan Mehio
London