Hi Joe & others
Some advice please on using photos as part of the Bootstrap web-design. A short while ago I took some group photos that I hoped to use in the redesign of the website. Using the Background Begin Includelet I imported a couple of photos to test out the appearance. The "Natural" setting just produced a very thin truncated image (probably about 20% of the original) from the central part of the image). I then tried "16x9 widescreen" as I knew that it had been used by others. This was much, much better image. Instead of loosing huge amounts at the top and bottom I was left with something like 50-60% (my perception/guestimate) of the original. As the group photo had whole bodies (their feet were literally at the bottom of the image) and lot of gapping above the heads, the resulting 16x9 widescreen setting had only heads of the people in the front row and a large amount of blank space at the top. I would like to lose the area above rather than the bottom of the image. Tinkering with the image doesn't really resolve the problem. Am I missing a trick or will I need to retake the group photo, making sure that there is adequate area below the feet of those taking part. Is there anyway that the Background Includelet could identify which area should be used and which area of an image can be lost?
Alan
With Background Image there's no definitive answer to "which bit of the picture will be visible" - because it'll depend on the size of the browser being used. The picture fills the available space and this varies greatly depending on whether it's a wide browser on a desktop or tall and thin on a mobile.
e.g, look at Superhighways and make the browser window wide and narrow and see how this affects the banner image.
The only way to ensure that an entire image is visible is to insert it inline, rather than as Background (e.g., using a media gallery, the wysiwyg editor, custom includelet, etc).
If you want the image to be background (e.g., with content over it) as a design element than you need a suitable photo and might be able to use a bit of custom CSS to tweak how the image is placed into the space.
e.g., look at Refugee Advocacy Forum and see how the group photo shows full people on a narrow screen but only their heads are visible on a wide screen.
In this case the banner size isn't fixed (changes with content), and I gave the includelet the class "background-image" so that I could add the following piece of custom CSS to the theme, so the image was positioned so that heads weren't cropped.
.homepage-image {
background-position-y: 20% !important;
}
We can look at this on the User Group Chat on Wednesday if that's useful.
Thanks
Joe