[Pro] Full width responsive image

Hi,

Could anyone tell me what the optimal width of a full width pass-through image should be? We have built a number of smaller sites using Backdraft and Freeway Pro 7. When viewing the full width background images and banner images on a wide screen laptop, the image does not seem wide enough to fill the entire width of the browser.

See this example. www.baobabridge.com

The landing page and remainder of the page banner images are 1600px wide in their original form in Photoshop, and if viewed on wider monitors they sit across to the left side, with white space on the right.

Thanks
Matthew


freewaytalk mailing list
email@hidden
Update your subscriptions at:

At least in Backdraft, but certainly in other layout models, you can set the image to 100% width, which will cause it to flex to fill the available space. This setting cannot be applied to a normal (drawn in place) image, but only to a pass-through image. Since you mention using Photoshop to prepare your images, I assume that you know how to do that trick.

Walter

On Oct 31, 2017, at 2:50 PM, Matt Covarr email@hidden wrote:

Hi,

Could anyone tell me what the optimal width of a full width pass-through image should be? We have built a number of smaller sites using Backdraft and Freeway Pro 7. When viewing the full width background images and banner images on a wide screen laptop, the image does not seem wide enough to fill the entire width of the browser.

See this example. www.baobabridge.com

The landing page and remainder of the page banner images are 1600px wide in their original form in Photoshop, and if viewed on wider monitors they sit across to the left side, with white space on the right.

Thanks
Matthew


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

in your example you have applied an image to the body tag and if you wanted that image to always fill the screen regardless of the browser proportions then you could apply the style of

        background-size: cover;

so change the size from auto to cover in the inspector palette

max


freewaytalk mailing list
email@hidden
Update your subscriptions at:

This is very useful, thank you. Just one question. The landing page background on the example is set as a background image, as opposed to being contained. What would the best size be for this background image, so that it’s made to cover all screens?


freewaytalk mailing list
email@hidden
Update your subscriptions at:

A jpeg file with a 1920 or 2560 px width will do. I always respect the 16:9 ratio for background images. I never β€˜Save for web’ with a quality deviation of less than 75%. Use the powerful ImageOptim app to get rid of useless kb’s and still have a high quality image.

– Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:

deviation > degradation


freewaytalk mailing list
email@hidden
Update your subscriptions at: