[ryanleedeveloperParticipant]

Hi there,

So I have a site that looks like this: http://prntscr.com/amkj2t

That grey background area is made up of 5 sections, as you can see I’m hovering over one of them in the screenshot. I was wondering if it’s possible to put in a background image that spans all 5 sections? Essentially turning that entire grey area into a single image.

Thanks!
Ryan

[RupokMember]

Hi Ryan,

Thanks for writing in! You can set a background image for multiple section at a time. However you can add multiple ROWs within a section to achieve the same. See – http://prntscr.com/amo0f2

Hope this makes sense.

Cheers!

[ryanleedeveloperParticipant]

Oh ok so would I need to make it a single section with multiple rows and then add the background image via CSS?

Thanks,
Ryan

[ChristopherModerator]

Hi there,

There are two ways, one is to add multiple rows and ad background image using CSS, to do so add
background-image:url("add image url"); in row’s style field.

You can also add background image to each section directly, see the attachment.

Hope that helps.

[ryanleedeveloperParticipant]

Ok so I’ve tried doing this and here is the result: http://prntscr.com/aoc1yq

You can see my custom background image with the guys in black and white have their feet going through the column below them. It looks like whats happening is if the width of the page changes, then the bottom of the image slides behind the image below it in the other column.

Is there anyway to prevent this from happening? I have no idea where the bottom of the image will be depending on the monitor of people who view it.

[RupokMember]

Hi there,

Thanks for writing back. You can try changing the background-properties like this :

background-image:url("add image url"); background-position: center bottom; background-size: 100% auto;

You can try changing the the background size to cover, contain etc. If you need more tailored answer then provide your URL.

Cheers!

[Author]

Posts