Fullwidth Background Image in Column

Support
#1

Hello! Is there a way to make the background image full width?

Here is an example of what I have…

Here is an example of what I want to achieve…

#2

Hello Samanta,

Thanks for writing in!

Using a section - row - 2 column structure will not allow you to accomplish like the screenshot.

Please make use of the row element inside one of the columns instead. You will need to have this structure:

- section

  - row 

    - column

    - column

      - row - add some row padding to create space around the column

        - column - this is where you insert the background image and also the container of the text element

Hope this make sense.

#3

I am so sorry, I tried doing what you said and it isn’t working. For the image on the left, I would like for it to fill the whole left side from the left of the screen to down the center, while I would like the side next to it to remain the off greige color.

#4

Hello Samantha,

Thanks for updating in!

If you want to have the background image from the left side of the screen to the bound of the left column, you will need to add the background image in the section’s background lower layer and add a white solid white background color in the background upper layer and in the right column. The size of the background image is only 50% so that it will only take up half of the section.

Please check out my test page in the secure note.

#5

Thank you so much for your help! A few follow ups…

So I would like only the image to show and to be full size on the left side. Like this:

However, as I size down on the screen size, it looks like this:

On the sample page, I see the same sizing issue too:

#6

Hi Samantha,

I have tested the test page and seems the structure does not look good in smaller screens. It means that we will have to wrap up the contents inside another row element. I have made a necessary change to the page. In the row settings > customize, I added an inline element css:

.x-section $el {
  margin-left: 0;
  margin-right: auto;
}

@media(min-width: 768px){
  .x-section $el {
  	max-width: calc((100vw - 50%)/2);
  }    
}

Please check it to see how I have laid out the nested row-columns layout into the page. You can save this section as a block template and use it in creating your section on the actual page.

#7

When I tried adding the code, it did this:

#8

Still not working :frowning:

#9

Hey Samantha,

I checked the page in the secure note and I don’t get the same as in your screenshot.

If that is not what you mean, would you mind posting the exact URL of the page you’re having this issue and also give us at least a mockup of what you want to achieve in desktop, tablet and mobile.

Thanks.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.