Proper way to create content sections with scaling

[fnbit]

I am working on this site layout: http://buccis.fnb-it.com and trying to get the background images to properly size when switching to mobile, tablet etc. If I don’t touch anything they are constrained vertically to a very small height and wider than the max site width.

If I add enough padding so they are not constrained and remove the the size entry (cover) they fit but don’t scale on lower resolutions. (Current setup)

My goal is to position text boxes or other elements over the backgrounds but have it scale on mobile (some elements I plan to hide on smaller screens).

What is the proper setting for the background images for each section to be as responsive as possible within reason, but retaining max site width and spacing between each section?

[ruenel]

Hello There,

Thanks for writing in! There is no proper setting for the background images. The best thing you could do is to understand how the background images works first. With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

we use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

To better assist what you are trying to do, would you mind sending us the url of the page that you are working on? Maybe we can give you some ideas how you can have your background image as responsive as it could possibly be.

Hope this helps.

[fnbit]

Sure!

Summary

Currently I am emulating this setup https://invis.io/GXNBW4SER9F#/312418934_BUCCI-2018-Web-Layout , the main page of the site is http://buccis.fnb-it.com/

I wish for the text to remain relatively in position when scaling, but each image section can scale or change based on display size. Generally I was able to replicate the site quite well, but the method I chose was incorrect. Moving forward I am interested in the best practice for this scenario. In the mobile view the image edges can be hidden or cut off if needed, I plan to experiment with your suggestions to see what works and retains the site feel. So far from your link it appears 100% auto is mostly accurate, except I may need to make some concessions for when the site is full width to capture the same layout as my demo.

[christian]

Hey @fnbit,

Depending on what you actually want to achieve, it might require more than just utilizing the background-size. It would be hard to recommend a setting if we have no idea what your end design per breakpoint. Please at least give us your design in desktop, tablet and mobile views. That is because for example, you said:

@fnbit

In the mobile view the image edges can be hidden or cut off if needed

Can it be cut off like this in a phone landscape?

In an iPad view, it’s possible that you might want this:

If you look at our Integrity 1 demo, it looks good from desktop to mobile and that is because it has a specific layout for each desktop, tablet and mobile. Each section has a desktop, tablet and mobile design. The tablet and mobile are hidden when you’re viewing from desktop and the desktop view is hidden when in mobile. That is made possible by the Hide During Breakpoints feature.

Sometimes, the best solution is the use of custom media queries. This method requires consulting a third party developer though.

You might also want to use Slider Revolution so you can easily position layers and it does have some scaling options as well. Please see this tutorial at https://www.themepunch.com/faq/slider-revolution-responsive-tutorial-5-0/.

Thanks.

[fnbit]

Revolution was my idea for a workaround this morning, thanks. I think I’ll go that route for element placement and scaling. I’ll let you know how it turns out for the next user that finds this thread.

[Prasant]

You are most welcome.