Responsive Main Image in Linked Site

[plat77]

Hello - Via the WB templates page, I've gone to one of the linked sites and am trying to replicate how the main image in the link below is responsive and maintains almost the enitre view of the image when scaling the browser. I'm sure this is with using a breakpoint, but is it a smaller main image used within that breakpoint to achieve the responsiveness? I believe the author of that site is on the forum. If so, and assuming a layout grid is used to contain that main image, what are the layout grid settings on the "style" tab? Any assistance is appreciated!

https://webbuildertemplates.com/templat ... rNetwork/#

[crispy68]

Hello,

That is my template. The image is a background image set to cover.

[plat77]

Thanks for the prompt response. I use cover for main images within layout grids / style tab, but cannot duplicate the responiveness you have in your template. If you take the new WB "Dentist" template and switch from parallax to cover within the style tab, shouldn't that duplicate the respnsiveness in your template? I'm thinking it should but when I resize my chrome broswer and/or do cntrl+shift+i and choose responsive, the image does not stay responsive with only using cover. I'm wondering if its a combination of settings needed other than just cover? I'm also using cntrl+shift+R to clear cache and no change. Any additional thoughts are appreciated!

[crispy68]

The settings are very simple. See below:



In the template, I've set the size to "fixed" which does the same thing as cover except the background doesn't scroll.

[plat77]

Thanks, but my results differ when I used the settings you provided. I have three images I'd like to share but it seems I do not have the ability to attach them. I think I need "attachments" to be enables by an administrator.

[crispy68]

You will need to upload the images to your server and then post a link. Uploading to the forum is disabled.

[BaconFries]

I think I need "attachments" to be enables by an administrator.

Sorry that is not possible for security reasons uploading images to the forum is disabled.
You can either use as suggested by crispy68 or use the following https://imgbb.com/upload

[plat77]

Thanks for the information and responses regarding images. Here is my output after using the suggested "fixed" setting:

[crispy68]

@plat77,

Yes, you will need to add breakpoints if you are using the 'dentist' template as there is only the default view. Once you add a breakpoint, you can then resize the 'welcome' grid (by adjusting the content within) so that the background image looks like you want. As it is, the height of the grid is at least 855px no matter how wide the screen is. When an image is set to cover, it will enlarge the image as much as it needs to cover the height and width.

[plat77]

ok, which leads me back to my original post regarding your template and the responsivness of the main image. Is it a new smaller copy of the image in your breakpoint within the layout grid? If not a new image how to you manipulate the image in the layout grid? Thanks.

[crispy68]

It is the same image.

A layout grids height is determined by the content within the grid. So you will need to adjust the height, padding, etc. of the grid itself and the contents inside to get the height you want.

However, in my template I'm actually using a floating layer not a layout grid. However, the same results can be done with either maybe just a little bit more work with a grid.

My example of a site I did where I used a grid: link

[plat77]

Ok. I will play around with it. Thanks for the patience and understaning. I think I've watched a few of your videos online. Would be great if you did one covering this or similar. Thanks again!

[plat77]

Thanks for sharing the link to your grid site. Looking at the code for the mainimage (as best I can), it seems that you have one breakpoint at 747px along with the other WB settings you mentioned earlier in the thread (for the image to cover/be fixed, etc). It also seems that you have a width of 100% and the viewport set at 100vh. Is this what is driving the "smoothness" / responsiveness when scaling the browser to smaller sizes? I mention this because I setup multiple breakpoints in the Dentist template via one of the videos you have online and adjusted the padding for the image at each breakpoint. This seems to work but the browser isn't smooth when scaling and hitting those breakpoints. I'd appreciate your input.

[crispy68]

Can you upload a demo page of what you have so I can see how yours is working? Providing a demo project will also help.

The image is 100vh because I wanted the background image to fill the entire browser regardless of the device you are using. In the Dentist template, it is not a full screen image. Typically, I would suggest cropping the image you are using for the background to fit the width and height of the container and show what part of the image you want seen.

For example, if you are going to use layer/grid/whatever, and it's going to be full width but the height will only be about 600px, then the background image should be at least around 1920px wide and 700px tall (give it some leeway). When you use 'cover' the browser is going to stretch the image as wide and tall as it needs to cover the background. There is no need to have excess height of an image if not going to be seen. This will also help keep the part of the image you want seen to centered in the background.

[plat77]

Hope this dropbox link is accessible: https://www.dropbox.com/s/r0ww3mh1249cy ... 2.wbs?dl=0

[crispy68]

Your demo is working correctly.

When a breakpoint is hit, yes it is resizing the background image to fit the background of the container. Since the height of the grid is different in each breakpoint it is going to "jump" to resize the image. That's just how it works. Think about it...if you are going from say 1366 x 600 to 780 x 300 it's not going to be smooth. It's going from one fixed height to another fixed height.

The only way you can get the 'smoothness' you are speaking of is you need to set the height to use a vh unit.