Full width background image without padding

FranzVz · September 2015

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 · September 2015

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.

FranzVz · September 2015

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 · September 2015

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.

FranzVz · September 2015

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 · September 2015

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.

FranzVz · September 2015

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

Albert · September 2015

You're welcome

Full width background image without padding

Comments

This website uses cookies