make background images fit all screens without scrolling

[nvdwolk]

Hi,

Can anyone tell me how to make the background images full screen without scrolling for all resolutions in this website? I’ve created it in Layerslider WP which had an option to add custom css.

http://lucengelhard.helpmeverder.nl/beplanting-3/

I’ve tried the following but it doen’t work:

body {
background-repeat: no-repeat !important;
background-attachment: fixed !important;
}

Thank you in advance!

Kind regards
Niels

[Beverleyh]

Try out background-size https://css-tricks.com/almanac/properties/b/background-size/

[WayneKenney]

I have a solution,

Try this:

body
{
background:url(“img.jpg”) top right no-repeat;
background-attachment:fixed;
}

The background image no matter what size will stretch to fit the entire window and it will stay perfectly static and unchanged as you scroll down the page.

[Shikkediel]

Not really…

Demo

[WayneKenney]

OK, good point. How about:

body {
background: url(“image.jpg”) top right no-repeat;
background-attachment: fixed;
background-size: 100%;
}

Adding “background-size: 100%;” for proper scaling if the image is in fact that small should rectify the issue. The background should still render perfectly even when the page has scroll bars.

Here we are:
Test

[Shikkediel]

That indeed is one approach. The question’s quite common and from what I know, it becomes tricky when the aspect ratio of the image is higher than that of the screen – it’ll leave a gap below. In short, I believe there’s no bullet proof solution to this for all screen sizes that’s also completely straightforward. One could use background-size: cover or media queries with aspect ratios but both have limitations as well.

[Senff]

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.

[Bülent KARAYAZI]

WayneKenney, Thank you for solution.

[Author]

Posts