I am working to change my website www.cafra-arabians.com/de from the them Multy Repixel to Foundation.
As you may see, in the moment i have a background picture, fixed to the top (page still ist in Repixel).
To realize this in foundation, i put the pic in the “site styles stack”, section “Site Background” and mark it as fixed.
BUT i want the picture to fit horizontally to the size of the screen but can not handle it.
If i put the pic to the background of the site or to a stack, then i can choose fit or fill and it works. But then i can not fix it to the top.
I want it fixed and fit
Yes, i am using cover image in the site styles in the site background settings and it does NOT fit responsivly the width of the website. It allways shows in the same size and so is allways to big i.e. only shows a small part of the pic.
Exaclty this is my problem.
This it looks like with foundation, set as cover image in the site background settings, preview full width. As you may see, the background pic does not fit to the width of the screen.
I see.
Try the Big White Duck Sections Pro. Here are the settings for what I think you are looking for. Set image size for “contain”. That keeps the entire image visible in the available space… even mobile. Hope that helps.
What you are seeing is exactly what CSS “cover” scaling does for background images.
In order to cover an area without altering the aspect ratio of the image and distorting it, the image has to be scaled to whichever axis (either width or height) is the greater. Obviously this will mean that the image is larger in the other direction too and will not all fit into view. You then have options for how the alignment will be handled - i.e., which edges are fixed to the origin of the image horizontally and vertically.
So, center center positioning wil center the image in both directions. Similarly left top will ensure that the left hand side and the top are always in view, with any overflow occurring at the right and bottom - dependent on the aspect ratio.
If you want to completely cover and fir, for example, a landscape image into a portrait sized box, this is inevitable. Other background scaling options allow you to either fill the space or contain to the width (which is more like what you think of as responsive scaling with respect to foreground images - but remember at some screen sizes you may well get an area of the background that is not covered by the image).
One solution for the vast difference in aspect ratio between a landscape desktop and a portrait mobile is to define a separate image for small (narrow) screens. You can thus use a portrait crop of your image below a certain breakpoint and a landscape one above it. Even with cover scaling you will get a much larger proportion of your image in view this way - Sections allows you to specify two images for this very reason. There is also the option to revert to a colour for the background on small screens which many people prefer in preference to a poorly cropped image.
Sections Pro produces other issues with menu bar and content.
I now forget about the fixed background pic and realized it without. At least it fits now to the screen
