How to fit a background-image in the browser's viewport
Hello! [Just started exploring in CSS and html] I'm having trouble to fit the background image in the browser's viewport (I used EDGE). I've tried several solutions, but they don't work. My current code does work in preserving the original ratio of the image, but it leaves spaces between the sides of the window. This is my html and css, files: https://codepen.io/make-web/pen/LYqRwVR.
2 Replies
You're already using
background-size. Consider the keyword values. Do you want it to fit (contain) or be cropped (cover).
If you want the background to be stretched, I'm not sure that can be done with a background image. Read the "Intrinsic dimensions and proportions" section.
I think you could do pretty well with background-size: cover; background-position: center;Thank you, very much.