Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS make background images fit all screens without scrolling Reply To: make background images fit all screens without scrolling

#246107
Senff
Participant

This is probably more of a design issue than a coding issue.

It’s fairly easy to make backgrounds “fill” the entire space available, with no gaps anywhere, no matter what screen size:

http://codepen.io/senff/pen/rrGgqz?editors=0100

One of the possible problems with this approach, is that parts of the image will get cut off at any given point, unless the browser/screen dimension aspect ratio is exactly the same as the image aspect ratio.

In the example above, you can see that the bottom of the image is cut off on wider screens, and that the sides get cut off on portrait screens. Regardless, there will never be any gaps or “open” space, and the image will always adjust to accomodate proper filling.