- This topic is empty.
October 2, 2016 at 6:32 am #246092nvdwolkParticipant
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.
I’ve tried the following but it doen’t work:
background-repeat: no-repeat !important;
background-attachment: fixed !important;
Thank you in advance!
NielsOctober 2, 2016 at 9:35 am #246095BeverleyhParticipant
Try out background-size https://css-tricks.com/almanac/properties/b/background-size/October 2, 2016 at 1:33 pm #246096WayneKenneyParticipant
I have a solution,
background:url(“img.jpg”) top right no-repeat;
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.October 2, 2016 at 2:56 pm #246098October 2, 2016 at 4:39 pm #246100WayneKenneyParticipant
OK, good point. How about:
background: url(“image.jpg”) top right no-repeat;
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:
TestOctober 2, 2016 at 7:54 pm #246101ShikkedielParticipant
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: coveror media queries with aspect ratios but both have limitations as well.October 3, 2016 at 2:34 am #246107SenffParticipant
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:
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.October 6, 2016 at 12:54 pm #246233Bülent KARAYAZIParticipant
WayneKenney, Thank you for solution.
- The forum ‘CSS’ is closed to new topics and replies.