Hi learner here,
Basically I want to display the full resized image with allocated height(let’s say 850px), but setting the height from the hero widget shrinks the image and doesn’t show the full image.
Link here
http://dev.gnasolutions.com.au/pratish/prime/home-cleaning/?preview_id=429&preview_nonce=fa16bd7d0d&_thumbnail_id=-1&preview=true
the image I put:
https://burst.shopify.com/photos/cleaning-supply-flatlay-bottom?q=home+cleaning
page
Link here is not valid so I posted the link again,
Hi, thanks for reaching out :)
Please, could you send a publicly viewable link, we’ll take a look and advise from there. The links provided previously are for page previews which are only available to logged-in users.
Link here
The photo I want to put:
Photo
Thanks :)
The Hero is using
background-image-size: cover. Cover will maintain image proportions while covering the available area. With a full-width stretched row, this means that on larger displays, you won’t see all of the image. A fixed width container is one way to avoid this. Another option might be to insert the image as a row background image. That can be done from the Design tab when editing a row. There you’ll have a few more background size options to choose from. In that event, you can set a height from the Attributes tab. You can use the CSS Declarations field as follows:height: 500pxYou could then insert a Headline widget for your headline.
If you’d like to experiment with the above, I recommend doing so on a test page so you can work quickly to see if it’s something you want to try.
In summary, there isn’t a way to have the image stretching full-screen width while also keeping all of the image in view on all display sizes. Another option might be to use a higher resolution image, starting out with a larger image.