Full width background image without padding

FranzVz

Hello.

I want the background images shown fully on all devices. This is what it was before: http://i.imgur.com/cIl2FHM.png

I added "background-size:100%;" to that first section, and that took care of the aspect ratio. This is what I get now: http://i.imgur.com/iunxUtZ.png

However, it still keeps the padding from the bigger picture. Is there a way to fix this?

Albert

Hi,

please send us url to page where you got this padding and we'll see if there is anything what we can do for you to remove this empty section.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

FranzVz

Hi, please view: http://thremodeling.com/ home page, the first big background image. I would like to keep the width/height/aspect ration intact when viewing in tablets and phones.

Albert

We have checked your site and we see what happen. background-size: 100% is a good solution but you got this padding on mobile devices because you set it yourself under section settings. It's 600px and that's why on mobile you got so large empty space. In this case we recommend to use just simple image in section instead of empty section with background image only. This will be much better solution. For section with image, just set no vertical and horizontal margin and image will look the same as background and will be responsive.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

FranzVz

Ok, that's a good solution. But I tried to just put an image, and remove all margins from the sides. It's almost there, however it won't fully go full width: http://thremodeling.com/testing/

Here is the 0px margins: http://i.imgur.com/NJOOgZe.jpg, but for some reason the parent is still over-riding it.

I tried width:100% in some places, but still no go.

Albert

But you supposed to set no vertical and horizontal margins style for section as we wrote above. Also please turn off padding for content under Theme options > Global > Advanced section.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

FranzVz

Oh, I didn't see that option! I only saw the padding at 0px. It works perfect now, thank you very much.

Albert

You're welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next